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/assets/less/codeTheme/github-code-block.less b/src/assets/less/codeTheme/github-code-block.less index 2640567..a54cede 100644 --- a/src/assets/less/codeTheme/github-code-block.less +++ b/src/assets/less/codeTheme/github-code-block.less @@ -5,7 +5,7 @@ margin: 10px 8px; position: relative; height: auto; - background-color: rgb(238, 238, 238); + background-color: rgba(27,31,35,.05); .code-snippet__line-index { display: none; diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue index cd3ec0a..4d0f6e8 100644 --- a/src/components/CodemirrorEditor/rightClickMenu.vue +++ b/src/components/CodemirrorEditor/rightClickMenu.vue @@ -1,12 +1,12 @@ @@ -70,14 +70,13 @@ export default { }); return false; }, - }, - watch: { - value(newVal) { - if (newVal) { - document.body.addEventListener('click', this.closeCB.bind(this)); + onMouseDown(key){ + if (key == 'insertPic') { + document.querySelector('.li__upload button').click() } else { - document.body.removeEventListener('click', this.closeCB.bind(this)); + this.$emit('menuTick', key) } + this.$emit('closeMenu', false) } }, } @@ -107,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 ff8372f..2b08c69 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,7 +24,8 @@ const state = { currentColor: '', citeStatus: 0, nightMode: false, - codeTheme: 'wechat' + codeTheme: 'wechat', + rightClickMenuVisible: false }; const mutations = { setEditorValue(state, data) { @@ -54,7 +55,10 @@ const mutations = { }, setCurrentCodeTheme(state, data) { state.codeTheme = data; - localStorage.setItem('codeTheme', data); + localStorage.setItem('codeTheme', data) + }, + setRightClickMenuVisible(state, data) { + state.rightClickMenuVisible = data; }, themeChanged(state) { state.nightMode = !state.nightMode; @@ -74,8 +78,7 @@ const mutations = { }, initEditorEntity(state) { state.editor = CodeMirror.fromTextArea( - document.getElementById('editor'), - { + document.getElementById('editor'), { value: '', mode: 'text/x-markdown', theme: 'xq-light', @@ -92,18 +95,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', @@ -114,7 +112,6 @@ const mutations = { extraKeys: { 'Ctrl-F': function autoFormat(editor) { const totalLines = editor.lineCount() - editor.autoFormatRange({ line: 0, ch: 0 @@ -127,11 +124,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), { diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue index 0489f7a..139cddf 100644 --- a/src/view/CodemirrorEditor.vue +++ b/src/view/CodemirrorEditor.vue @@ -57,6 +57,7 @@ :left="mouseLeft" :top="mouseTop" @menuTick="onMenuEvent" + @closeMenu="closeRightClickMenu" /> @@ -82,7 +83,6 @@ export default { showCssEditor: false, aboutDialogVisible: false, dialogFormVisible: false, - rightClickMenuVisible: false, isCoping: false, isImgLoading: false, backLight: false, @@ -107,7 +107,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() { @@ -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(); @@ -267,7 +280,10 @@ 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); + }, + closeRightClickMenu(){ + this.$store.commit('setRightClickMenuVisible', false); }, onMenuEvent(type, info = {}) { switch (type) {