# Screenshot 屏幕截图
<!-- 导入需要的包 (一定要放到index.html中的head标签里)-->
<script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<template>
<el-button @click="handleOk"
type="primary"
icon="el-icon-camera">意见反馈</el-button>
<el-dialog append-to-body
title="意见反馈"
top="50px"
v-model="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"
style="width:100%" />
</div>
<template #footer>
<el-button type="primary"
icon="el-icon-check"
@click="box=false">提 交</el-button>
</template>
</el-dialog>
</template>
<script>
export default {
data () {
return {
box: false,
form: {
img: '',
text: ''
}
}
},
computed: {
flag () {
return !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>
```
显示代码复制代码复制代码