实现粘贴图片

 <template>
-  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
-    @closeDialog="closeDialog" v-model="value">
+  <dialogBox
+    title="新增系统通知"
+    @submitForm="submitForm"
+    saveButton="保存"
+    :isFullscreen="false"
+    width="60%"
+    @closeDialog="closeDialog"
+    v-model="value"
+  >
     <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
       <el-row>
         <el-col :span="12">
@@ -21,14 +28,14 @@
           <el-form-item label="通知内容:" prop="noticeContent">
             <quill-editor
               v-model="ruleForm.noticeContent"
+              class="editor ql-editor"
               ref="myQuillEditor"
               :options="editorOption"
               @blur="onEditorBlur($event)"
               @focus="onEditorFocus($event)"
               @change="onEditorChange($event)"
               @ready="onEditorReady($event)"
-            >
-            </quill-editor>
+            ></quill-editor>
             <!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
           </el-form-item>
         </el-col>
@@ -36,8 +43,14 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="附件:" prop="noticeFileUrl">
-            <el-upload action="" multiple :auto-upload="false" :limit="1"
-              :on-change="handleChange" :before-upload="beforeUpload">
+            <el-upload
+              action
+              multiple
+              :auto-upload="false"
+              :limit="1"
+              :on-change="handleChange"
+              :before-upload="beforeUpload"
+            >
               <el-button icon="el-icon-upload" type="primary">上传</el-button>
               <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
             </el-upload>
@@ -45,10 +58,16 @@
         </el-col>
       </el-row>
       <div v-show="false">
-        <el-upload action=""  multiple :auto-upload="false"
-              :on-change="RichTexthandleChange" :before-upload="beforeUpload" class="richUpload">
-              <el-button icon="el-icon-upload" type="primary">上传</el-button>
-              <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
+        <el-upload
+          action
+          multiple
+          :auto-upload="false"
+          :on-change="RichTexthandleChange"
+          :before-upload="beforeUpload"
+          class="richUpload"
+        >
+          <el-button icon="el-icon-upload" type="primary">上传</el-button>
+          <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
         </el-upload>
       </div>
     </el-form>
@@ -56,35 +75,35 @@
 </template>
 
 <script>
-import { addSysNotice } from "@/api/notice.js"
-import { upload } from "@/api/system.js"
+import { addSysNotice } from "@/api/notice.js";
+import { upload } from "@/api/system.js";
 import { quillEditor } from "vue-quill-editor";
 export default {
   props: {
-    value: { type: Boolean, default: false },
+    value: { type: Boolean, default: false }
   },
   components: { quillEditor },
-  data () {
+  data() {
     return {
       ruleForm: {
-        noticeTitle: '',
-        noticeContent: '',
-        noticeFileUrl: '',
-        noticeSource: '',
-        noticeType: '1'
+        noticeTitle: "",
+        noticeContent: "",
+        noticeFileUrl: "",
+        noticeSource: "",
+        noticeType: "1"
       },
       rules: {
         noticeTitle: [
-          { required: true, message: '请输入通知标题', trigger: 'blur' }
+          { required: true, message: "请输入通知标题", trigger: "blur" }
         ],
         noticeContent: [
-          { required: true, message: '请输入通知内容', trigger: 'blur' }
+          { required: true, message: "请输入通知内容", trigger: "blur" }
         ],
         noticeSource: [
-          { required: true, message: '请输入通知来源', trigger: 'blur' }
+          { required: true, message: "请输入通知来源", trigger: "blur" }
         ]
       },
-       // 富文本编辑器配置
+      // 富文本编辑器配置
       editorOption: {
         theme: "snow", // or 'bubble'
         modules: {
@@ -97,66 +116,76 @@ export default {
               [{ script: "sub" }, { script: "super" }], // 上标/下标
               [{ indent: "-1" }, { indent: "+1" }], // 缩进
               [{ direction: "rtl" }], // 文本方向
-              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+              [{ size: ["small", false, "large", "huge"] }], // 字体大小
               [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
               [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
               // [{ font: ['songti'] }], // 字体种类
               [{ align: [] }], // 对齐方式
               ["clean"], // 清除文本格式
-              ["image", "video"], // 链接、图片、视频
+              ["image", "video"] // 链接、图片、视频
             ],
-             handlers: {
-                image: function(value) {
-                    if (value) {
-                        // 用upload的点击事件代替文本编辑器的图片上传事件
-                        document.querySelector('.richUpload input').click();
-                    } else {
-                        this.quill.format('image', false);
-                    }
+            handlers: {
+              image: function(value) {
+                if (value) {
+                  // 用upload的点击事件代替文本编辑器的图片上传事件
+                  document.querySelector(".richUpload input").click();
+                } else {
+                  this.quill.format("image", false);
                 }
+              }
             }
           }
         },
-        placeholder: "请输入正文",
-      },
-    }
+        placeholder: "请输入正文"
+      }
+    };
   },
- mounted() {
-    //  自定义粘贴图片功能
-    let quill = this.$refs.myQuillEditor.quill;    
-    quill.root.addEventListener("paste",evt => {
-        console.log(1111);
-        if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
-          console.log(2222);
-          evt.preventDefault();
-          [].forEach.call(evt.clipboardData.files, file => {
-            console.log(33333);
-            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
-              return;
-            }
-            console.log(4444);
-            this.RichTexthandleChange(File);
-          });
-        }
-      },
-      false
-    );
+  watch: {
+    value(val) {
+      if (val) {
+        let that = this
+        this.$nextTick(() => {
+          let quill = this.$refs.myQuillEditor.quill;
+          this.$forceUpdate();
+          quill.root.addEventListener(
+            "paste",
+            evt => {
+              if (
+                evt.clipboardData &&
+                evt.clipboardData.files &&
+                evt.clipboardData.files.length
+              ) {
+                evt.preventDefault();
+                [].forEach.call(evt.clipboardData.files, file => {
+                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+                    return;
+                  }
+                  that.clipboardPictureChange(file);
+                });
+              }
+            },
+            false
+          );
+        });
+      }
+    }
   },
+  mounted() {},
   methods: {
-    submitForm () {
+    submitForm() {
       let that = this;
       that.$refs.ruleForm.validate(valid => {
         if (valid) {
           addSysNotice(this.ruleForm).then(res => {
             if (res.code == 200) {
-              this.$message.success('保存成功')
+              this.$message.success("保存成功");
               this.$emit("input", false);
               this.resetRuleForm();
               this.$parent.queryClick();
             } else {
-              this.$message.error(res.message)
+              this.$message.error(res.message);
             }
-          })
+          });
         } else {
           // console.log('error submit!!');
           return false;
@@ -164,31 +193,38 @@ export default {
       });
     },
     //关闭窗口
-    closeDialog () {
+    closeDialog() {
       this.$emit("input", false);
       this.resetRuleForm();
     },
     //
-    resetRuleForm () {
-      this.$refs['ruleForm'].resetFields();
-      this.ruleForm.noticeType = '1'
+    resetRuleForm() {
+      this.$refs["ruleForm"].resetFields();
+      this.ruleForm.noticeType = "1";
     },
-    beforeUpload (file) {
-      return true
+    beforeUpload(file) {
+      return true;
     },
     //附件上传事件
-    async handleChange (file) {
+    async handleChange(file) {
       var formdata = new FormData();
       formdata.append("file", file.raw);
       upload(formdata).then(res => {
-        this.ruleForm.noticeFileUrl = res.message
-      })
+        this.ruleForm.noticeFileUrl = res.message;
+      });
     },
     //富文本图片上传事件
-    async RichTexthandleChange (file) {
+    RichTexthandleChange(file) {
+      this.uploadPicture(file.raw)
+    },
+    //图片粘贴事件
+    clipboardPictureChange(file) {
+      this.uploadPicture(file)
+    },
+    uploadPicture(file){
       let that = this;
       var formdata = new FormData();
-      formdata.append("file", file.raw);
+      formdata.append("file", file);
       upload(formdata).then(res => {
         //editor对象
         const quill = that.$refs.myQuillEditor.quill;
@@ -196,11 +232,11 @@ export default {
         // 获取光标所在位置
         const length = quill.selection.savedRange.index;
         // 插入图片
-        quill.insertEmbed(length, 'image', res.message);
+        quill.insertEmbed(length, "image", res.message);
         // 调整光标到最后
         quill.setSelection(length + 1);
         //that.quillUpdateImg = false;
-      })
+      });
     },
     onSubmit() {
       //console.log("submit!");
@@ -221,9 +257,9 @@ export default {
     onEditorChange({ quill, html, text }) {
       //console.log("editor change!", quill, html, text);
       //this.content = html;
-    },
+    }
   }
-}
+};
 </script>
 <style scoped lang="scss">
 // .ql-editor{
@@ -232,5 +268,5 @@ export default {
 /deep/.ql-editor {
   padding: 0px;
   height: 500px;
-}     
+}
 </style>
\ No newline at end of file