1 Star 0 Fork 50

绿树白云 / avue-doc

forked from 鹏鹏 / avue-doc 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
screenshot.md 2.09 KB
一键复制 编辑 原始数据 按行查看 历史
smallwei 提交于 2020-05-30 20:51 . init docs
<script> export default { data () { return { box: false, form: { img: '', text: '' } } }, computed: { flag () { return this.validatenull(this.form.img); } }, methods: { handleOk () { this.form = { img: '', text: '' } this.$Screenshot(document.querySelector("#app")).then(canvas => { this.form.img = canvas.toDataURL("image/jpeg", 0.8); }); this.box = true; } } } </script>

Screenshot 屏幕截图

:::tip 2.1.1+ ::::

<!-- 导入需要的包 (一定要放到head标签里)-->
<script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

:::demo

<el-button @click="handleOk"
                 type="primary"
                 icon="el-icon-camera"
                 >意见反馈</el-button>
  <el-dialog modal-append-to-body
            append-to-body
            title="意见反馈"
            top="50px"
            :visible.sync="box"
            width="60%">
  <el-input type="textarea"
            placeholder="请告诉我们遇到的问题或建议"
            v-model="form.text"></el-input>
     <br />
     <br />
  <div v-loading="flag"
        element-loading-text="正在截取屏幕数据">
    <img :src="form.img"
          width="100%" />
  </div>
  <span slot="footer" >
    <el-button type="primary"
                icon="el-icon-check"
                @click="handleSubmit">提 交</el-button>
  </span>
</el-dialog>
<script>
export default {
    data () {
      return {
        box: false,
        form: {
          img: '',
          text: ''
        }
      }
    },
    computed: {
      flag () {
        return this.validatenull(this.form.img);
      }
    },
    methods: {
      handleOk () {
        this.form = {
          img: '',
          text: ''
        }
        this.$Screenshot(document.querySelector("#app")).then(canvas => {
          this.form.img = canvas.toDataURL("image/jpeg", 0.8);
        });
        this.box = true;
      }
    }
}
</script>

:::

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/greentreecloud/avue-doc.git
git@gitee.com:greentreecloud/avue-doc.git
greentreecloud
avue-doc
avue-doc
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891