<!-- 导入需要的包 (一定要放到head标签里)-->
<script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<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>
![在这里插入图片描述](https://img-blog.csdnimg.cn/fd4c815acc5742d697baa5db98db8c00.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/11b5db2bc5ef49a5b6267a72558abaed.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/77eee56784304e9ca5a8ac4f7ae387d8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ==,size_16,color_FFFFFF,t_70)
Screenshot 屏幕截图
最新推荐文章于 2022-03-03 10:57:05 发布