From aade1445bcdd7c3aeb05275be68f7f771ada1085 Mon Sep 17 00:00:00 2001 From: hlwwlh Date: Sun, 19 Jul 2020 13:54:11 +0000 Subject: [PATCH 1/3] fix: right click menu visable bug --- .../CodemirrorEditor/rightClickMenu.vue | 9 --------- src/store/index.js | 17 ++++++++++++++++- src/view/CodemirrorEditor.vue | 6 +++--- 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue index cd3ec0a..2ca6152 100644 --- a/src/components/CodemirrorEditor/rightClickMenu.vue +++ b/src/components/CodemirrorEditor/rightClickMenu.vue @@ -71,15 +71,6 @@ export default { return false; }, }, - watch: { - value(newVal) { - if (newVal) { - document.body.addEventListener('click', this.closeCB.bind(this)); - } else { - document.body.removeEventListener('click', this.closeCB.bind(this)); - } - } - }, } diff --git a/src/store/index.js b/src/store/index.js index 0d350e6..cf5d070 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -23,7 +23,8 @@ const state = { currentSize: '', currentColor: '', citeStatus: 0, - nightMode: false + nightMode: false, + rightClickMenuVisible:false }; const mutations = { setEditorValue(state, data) { @@ -51,6 +52,9 @@ const mutations = { state.currentColor = data; localStorage.setItem('color', data) }, + setRightClickMenuVisible(state,data){ + state.rightClickMenuVisible = data; + }, themeChanged(state) { state.nightMode = !state.nightMode; }, @@ -93,6 +97,17 @@ const mutations = { const doc = formatDoc(DEFAULT_CONTENT) state.editor.setValue(doc) } + + state.editor.on("cursorActivity",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 0489f7a..4d2ef9f 100644 --- a/src/view/CodemirrorEditor.vue +++ b/src/view/CodemirrorEditor.vue @@ -82,7 +82,6 @@ export default { showCssEditor: false, aboutDialogVisible: false, dialogFormVisible: false, - rightClickMenuVisible: false, isCoping: false, isImgLoading: false, backLight: false, @@ -107,7 +106,8 @@ export default { cssEditor: state=> state.cssEditor, currentSize: state=> state.currentSize, currentColor: state=> state.currentColor, - nightMode: state=> state.nightMode + nightMode: state=> state.nightMode, + rightClickMenuVisible: state=> state.rightClickMenuVisible }) }, created() { @@ -267,7 +267,7 @@ export default { const left = e.clientX - offsetLeft; this.mouseLeft = Math.min(maxLeft, left); this.mouseTop = e.clientY + 10; - this.rightClickMenuVisible = true; + this.$store.commit('setRightClickMenuVisible', true); }, onMenuEvent(type, info = {}) { switch (type) { From 3151c4fe99d498e2456a30041ab1aa98cd028e18 Mon Sep 17 00:00:00 2001 From: hlwwlh Date: Sun, 19 Jul 2020 14:49:37 +0000 Subject: [PATCH 2/3] fix: same position right click menu visable bug --- src/store/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index cf5d070..9dcf94c 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -52,7 +52,7 @@ const mutations = { state.currentColor = data; localStorage.setItem('color', data) }, - setRightClickMenuVisible(state,data){ + setRightClickMenuVisible(state,data) { state.rightClickMenuVisible = data; }, themeChanged(state) { @@ -98,13 +98,13 @@ const mutations = { state.editor.setValue(doc) } - state.editor.on("cursorActivity",function(){ + state.editor.on('mousedown', function() { state.rightClickMenuVisible = false }); - state.editor.on("blur",function(){ + state.editor.on('blur', function() { state.rightClickMenuVisible = false }); - state.editor.on("scroll",function(){ + state.editor.on('scroll', function() { state.rightClickMenuVisible = false }); From 33252765a45255df6a05add64a0dba7f29ecb841 Mon Sep 17 00:00:00 2001 From: hlw Date: Sun, 26 Jul 2020 18:39:27 +0800 Subject: [PATCH 3/3] 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 @@ @@ -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':