欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在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);
    },