From aade1445bcdd7c3aeb05275be68f7f771ada1085 Mon Sep 17 00:00:00 2001 From: hlwwlh Date: Sun, 19 Jul 2020 13:54:11 +0000 Subject: [PATCH 1/4] 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/4] 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/4] 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': From 20118445a12f8376e9c90632b045617bcb0d0ee1 Mon Sep 17 00:00:00 2001 From: yanglbme Date: Sun, 26 Jul 2020 23:27:42 +0800 Subject: [PATCH 4/4] build: release v1.3.5 --- package.json | 2 +- .../CodemirrorEditor/rightClickMenu.vue | 2 +- src/store/index.js | 26 +++++-------------- 3 files changed, 9 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 9df05be..946d798 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-md", - "version": "1.3.4", + "version": "1.3.5", "private": true, "homepage": "https://doocs.gitee.io/md", "scripts": { diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue index 5bc2b6f..4d0f6e8 100644 --- a/src/components/CodemirrorEditor/rightClickMenu.vue +++ b/src/components/CodemirrorEditor/rightClickMenu.vue @@ -76,7 +76,7 @@ export default { } else { this.$emit('menuTick', key) } - this.$emit('closeMenu',false) + this.$emit('closeMenu', false) } }, } diff --git a/src/store/index.js b/src/store/index.js index 56adbf7..2528675 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,7 +24,7 @@ const state = { currentColor: '', citeStatus: 0, nightMode: false, - rightClickMenuVisible:false + rightClickMenuVisible: false }; const mutations = { setEditorValue(state, data) { @@ -52,7 +52,7 @@ const mutations = { state.currentColor = data; localStorage.setItem('color', data) }, - setRightClickMenuVisible(state,data) { + setRightClickMenuVisible(state, data) { state.rightClickMenuVisible = data; }, themeChanged(state) { @@ -72,8 +72,7 @@ const mutations = { }, initEditorEntity(state) { state.editor = CodeMirror.fromTextArea( - document.getElementById('editor'), - { + document.getElementById('editor'), { value: '', mode: 'text/x-markdown', theme: 'xq-light', @@ -90,19 +89,13 @@ const mutations = { } } ) - // 如果有编辑器内容被保存则读取，否则加载默认内容 - if (localStorage.getItem('__editor_content')) { - state.editor.setValue(localStorage.getItem('__editor_content')) - } else { - const doc = formatDoc(DEFAULT_CONTENT) - state.editor.setValue(doc) - } + // 如果有编辑器内容被保存则读取，否则加载默认内容 + state.editor.setValue(localStorage.getItem('__editor_content') || formatDoc(DEFAULT_CONTENT)) }, initCssEditorEntity(state) { state.cssEditor = CodeMirror.fromTextArea( - document.getElementById('cssEditor'), - { + document.getElementById('cssEditor'), { value: '', mode: 'css', theme: 'style-mirror', @@ -113,7 +106,6 @@ const mutations = { extraKeys: { 'Ctrl-F': function autoFormat(editor) { const totalLines = editor.lineCount() - editor.autoFormatRange({ line: 0, ch: 0 @@ -126,11 +118,7 @@ const mutations = { ) // 如果有编辑器内容被保存则读取，否则加载默认内容 - if (localStorage.getItem('__css_content')) { - state.cssEditor.setValue(localStorage.getItem('__css_content')) - } else { - state.cssEditor.setValue(DEFAULT_CSS_CONTENT) - } + state.cssEditor.setValue(localStorage.getItem('__css_content') || DEFAULT_CSS_CONTENT) }, editorRefresh(state) { let output = marked(state.editor.getValue(0), {