From 33252765a45255df6a05add64a0dba7f29ecb841 Mon Sep 17 00:00:00 2001
From: hlw <hlw@hlw.com>
Date: Sun, 26 Jul 2020 18:39:27 +0800
Subject: [PATCH] fix: menu close bug

---
 .../CodemirrorEditor/rightClickMenu.vue       | 26 ++++++++++++++++---
 src/store/index.js                            | 12 +--------
 src/view/CodemirrorEditor.vue                 | 16 ++++++++++++
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue
index 2ca6152..5bc2b6f 100644
--- a/src/components/CodemirrorEditor/rightClickMenu.vue
+++ b/src/components/CodemirrorEditor/rightClickMenu.vue
@@ -1,12 +1,12 @@
 <template>
     <ul v-show="value"  id="menu" class="menu" :style="`left: ${left}px;top: ${top}px;`">
-        <li v-for="item of list" :key="item.key" class="menu_item">
+        <li v-for="item of list" :key="item.key" class="menu_item" @mousedown="onMouseDown(item.key)">
             <el-upload v-if="item.key === 'insertPic'" action="" class="li__upload"
                 :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
                 :before-upload="beforeUpload">
-                <span>{{item.text}}</span>
+                <button class="btn-upload">{{item.text}}</button>
             </el-upload>
-            <span v-else @click="$emit('menuTick', item.key)">{{item.text}}</span>
+            <span v-else>{{item.text}}</span>
         </li>
     </ul>
 </template>
@@ -70,6 +70,14 @@ export default {
             });
             return false;
         },
+        onMouseDown(key){
+            if (key == 'insertPic') {
+                document.querySelector('.li__upload button').click()
+            } else {
+                this.$emit('menuTick', key)
+            }
+           this.$emit('closeMenu',false)
+        }
     },
 }
 </script>
@@ -98,12 +106,22 @@ export default {
         color: white;
         background: rgb(139, 146, 148);
     }
-    span {
+    span,.btn-upload {
         text-align: center;
         display: inline-block;
         padding: 4px 0;
         width: 100%;
     }
+    .btn-upload {
+        margin: 0;
+        border:none;
+        outline: none;
+        background: transparent;
+    }
+    .btn-upload:hover {
+        color: white;
+        background: rgb(139, 146, 148);
+    }
     /deep/ .el-upload {
         width: 100%;
     }
diff --git a/src/store/index.js b/src/store/index.js
index 9dcf94c..56adbf7 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -97,17 +97,7 @@ const mutations = {
             const doc = formatDoc(DEFAULT_CONTENT)
             state.editor.setValue(doc)
         }
-
-        state.editor.on('mousedown', function() {
-            state.rightClickMenuVisible = false
-        });
-        state.editor.on('blur', function() {
-            state.rightClickMenuVisible = false
-        });
-        state.editor.on('scroll', function() {
-            state.rightClickMenuVisible = false
-        });
-
+        
     },
     initCssEditorEntity(state) {
         state.cssEditor = CodeMirror.fromTextArea(
diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue
index 4d2ef9f..139cddf 100644
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@@ -57,6 +57,7 @@
             :left="mouseLeft"
             :top="mouseTop"
             @menuTick="onMenuEvent"
+            @closeMenu="closeRightClickMenu"
         />
     </div>
 </template>
@@ -158,6 +159,18 @@ export default {
                     }
                 }
             });
+
+            this.editor.on('mousedown', () => {
+                this.$store.commit('setRightClickMenuVisible', false);
+            });
+            this.editor.on('blur', () => {
+                //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
+                this.$store.commit('setRightClickMenuVisible', false);   
+            });
+            this.editor.on('scroll', () => {
+                this.$store.commit('setRightClickMenuVisible', false);
+            });
+
         },
         initCssEditor() {
             this.initCssEditorEntity();
@@ -269,6 +282,9 @@ export default {
             this.mouseTop = e.clientY + 10;
             this.$store.commit('setRightClickMenuVisible', true);
         },
+        closeRightClickMenu(){
+            this.$store.commit('setRightClickMenuVisible', false);
+        },
         onMenuEvent(type, info = {}) {
             switch (type) {
                 case 'pageReset':