在vue页面进行复制粘贴
程序员文章站
2022-05-14 22:20:53
...
在vue页面进行复制粘贴
在vue页面进行复制粘贴
html
<el-form-item label="修复截图" prop="repairSrc" v-on:paste="handlePaste">
mounted
document.addEventListener('paste', this.handlePaste);
//进行监听
methods
handlePaste(event) {
if (!this.dialogCreatePlanFormVisible) {
return;
}
//进行判断,否侧只要一粘贴就会触发
let items = (event.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持本地');
return;
}
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
items = [];
if (!file) {
this.$message.error('粘贴内容非图片');
return;
}
if (this.fileList[0]) {
// this.$message.error("只能有一张图片");
return;
}
this.file = file;
this.fileList.push(file);
},