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 @@ @@ -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) + } }, } @@ -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" /> @@ -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':