chore: migration rightClickMenuVisible (#178)

从 vuex 当中抽离 `rightClickMenuVisible`，该值并不需要放入 Vuex 当中共享

src/components/CodemirrorEditor/RightClickMenu.vue

@@ -2,13 +2,13 @@
   <div
     id="menu"
     class="menu"
-    v-show="value"
+    v-show="visible"
     :style="`left: ${left}px;top: ${top}px;`"
   >
     <ul class="menu__group" v-for="(menuItem, index) in menu" :key="index">
       <li
         class="menu_item"
-        v-for="{ key, text } of menuItem"
+        v-for="{ key, text } in menuItem"
         :key="key"
         @mousedown="onMouseDown(key)"
       >
@@ -21,7 +21,7 @@
 <script>
 export default {
   props: {
-    value: {
+    visible: {
       type: Boolean,
       default: false,
     },
@@ -73,9 +73,6 @@ export default {
     }
   },
   methods: {
-    closeCB() {
-      this.$emit(`input`, false)
-    },
     onMouseDown(key) {
       this.$emit(`menuTick`, key)
       this.$emit(`closeMenu`, false)

src/store/index.js

@@ -6,7 +6,7 @@ import { marked } from 'marked'
 import CodeMirror from 'codemirror/lib/codemirror'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
-import { setColor, formatDoc, formatCss } from '../assets/scripts/util'
+import { setColor, formatDoc, formatCss } from '@/assets/scripts/util'
 
 Vue.use(Vuex)
 
@@ -22,7 +22,6 @@ const state = {
   citeStatus: 0,
   nightMode: false,
   codeTheme: config.codeThemeOption[0].value,
-  rightClickMenuVisible: false,
 }
 const mutations = {
   setEditorValue(state, data) {
@@ -54,9 +53,6 @@ const mutations = {
     state.codeTheme = data
     localStorage.setItem(`codeTheme`, data)
   },
-  setRightClickMenuVisible(state, data) {
-    state.rightClickMenuVisible = data
-  },
   themeChanged(state) {
     state.nightMode = !state.nightMode
     localStorage.setItem(`nightMode`, state.nightMode)

src/views/CodemirrorEditor.vue

@@ -31,7 +31,7 @@
             :span="12"
             class="codeMirror-wrapper"
             ref="codeMirrorWrapper"
-            @contextmenu.prevent.native="openMenu($event)"
+            @contextmenu.prevent.native="openMenu"
           >
             <textarea
               id="editor"
@@ -96,7 +96,7 @@
     <insert-form-dialog v-model="dialogFormVisible"></insert-form-dialog>
 
     <right-click-menu
-      v-model="rightClickMenuVisible"
+      :visible="rightClickMenuVisible"
       :left="mouseLeft"
       :top="mouseTop"
       @menuTick="onMenuEvent"
@@ -144,6 +144,7 @@ export default {
       source: ``,
       mouseLeft: 0,
       mouseTop: 0,
+      rightClickMenuVisible: false,
     }
   },
   components: {
@@ -163,7 +164,6 @@ export default {
       currentSize: (state) => state.currentSize,
       currentColor: (state) => state.currentColor,
       nightMode: (state) => state.nightMode,
-      rightClickMenuVisible: (state) => state.rightClickMenuVisible,
       codeTheme: (state) => state.codeTheme,
     }),
   },
@@ -304,14 +304,14 @@ export default {
       })
 
       this.editor.on(`mousedown`, () => {
-        this.$store.commit(`setRightClickMenuVisible`, false)
+        this.rightClickMenuVisible = false
       })
       this.editor.on(`blur`, () => {
         //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
-        this.$store.commit(`setRightClickMenuVisible`, false)
+        this.rightClickMenuVisible = false
       })
       this.editor.on(`scroll`, () => {
-        this.$store.commit(`setRightClickMenuVisible`, false)
+        this.rightClickMenuVisible = false
       })
     },
     initCssEditor() {
@@ -575,10 +575,10 @@ export default {
       const left = e.clientX - offsetLeft
       this.mouseLeft = Math.min(maxLeft, left)
       this.mouseTop = e.clientY + 10
-      this.$store.commit(`setRightClickMenuVisible`, true)
+      this.rightClickMenuVisible = true
     },
     closeRightClickMenu() {
-      this.$store.commit(`setRightClickMenuVisible`, false)
+      this.rightClickMenuVisible = false
     },
     onMenuEvent(type, info = {}) {
       switch (type) {