chore: from value to visible (doocs#186)

- 将 `value` 修改为 `visible`，并添加显式关闭方法
AiPuZi · Aug 17, 2022 · 5df723f · 5df723f
1 parent 99c0ce6
commit 5df723f
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 26 deletions.
diff --git a/src/components/CodemirrorEditor/AboutDialog.vue b/src/components/CodemirrorEditor/AboutDialog.vue
@@ -2,8 +2,8 @@
   <el-dialog
     title="关于"
     class="about__dialog"
-    :visible="value"
-    @close="$emit('input', false)"
+    :visible="visible"
+    @close="$emit('close')"
     width="30%"
     center
   >
@@ -37,7 +37,7 @@
 <script>
 export default {
   props: {
-    value: {
+    visible: {
       type: Boolean,
       default: false,
     },

diff --git a/src/components/CodemirrorEditor/InsertFormDialog.vue b/src/components/CodemirrorEditor/InsertFormDialog.vue
@@ -2,8 +2,8 @@
   <el-dialog
     title="插入表格"
     class="insert__dialog"
-    :visible="value"
-    @close="$emit('input', false)"
+    :visible="visible"
+    @close="$emit('close')"
     border
   >
     <el-row class="tb-options" type="flex" align="middle" :gutter="10">
@@ -44,7 +44,7 @@
       </tr>
     </table>
     <div slot="footer" class="dialog-footer">
-      <el-button :type="btnType" @click="$emit('input', false)" plain>
+      <el-button :type="btnType" @click="$emit('close')" plain>
         取 消
       </el-button>
       <el-button :type="btnType" @click="insertTable" plain> 确 定 </el-button>
@@ -59,7 +59,7 @@ import { mapState, mapMutations } from 'vuex'
 
 export default {
   props: {
-    value: {
+    visible: {
       type: Boolean,
       default: false,
     },
@@ -95,7 +95,7 @@ export default {
       this.rowNum = 3
       this.colNum = 3
       this.editor.replaceSelection(`\n${table}\n`, `end`)
-      this.$emit(`input`, false)
+      this.$emit(`close`)
       this.editorRefresh()
     },
     ...mapMutations([`editorRefresh`]),

diff --git a/src/components/CodemirrorEditor/RightClickMenu.vue b/src/components/CodemirrorEditor/RightClickMenu.vue
@@ -53,19 +53,19 @@ export default {
         ],
         [
           {
-            text: `导入 Markdown 文档`,
+            text: `导入 .md 文档`,
             key: `importMarkdown`,
           },
           {
-            text: `导出 Markdown 文档`,
+            text: `导出 .md 文档`,
             key: `download`,
           },
           {
-            text: `导出 HTML 页面`,
+            text: `导出 .html`,
             key: `export`,
           },
           {
-            text: `格式化 Markdown 文档`,
+            text: `格式化`,
             key: `formatMarkdown`,
           },
         ],
@@ -75,7 +75,7 @@ export default {
   methods: {
     onMouseDown(key) {
       this.$emit(`menuTick`, key)
-      this.$emit(`closeMenu`, false)
+      this.$emit(`closeMenu`)
     },
   },
 }

diff --git a/src/components/CodemirrorEditor/UploadImgDialog.vue b/src/components/CodemirrorEditor/UploadImgDialog.vue
@@ -2,7 +2,7 @@
   <el-dialog
     title="本地上传"
     class="upload__dialog"
-    :visible="value"
+    :visible="visible"
     @close="$emit('close')"
   >
     <el-tabs type="activeName" v-model="activeName">
@@ -391,7 +391,7 @@ import CodeMirror from 'codemirror/lib/codemirror'
 
 export default {
   props: {
-    value: {
+    visible: {
       type: Boolean,
       default: false,
     },

diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
@@ -19,7 +19,7 @@
           @export="exportEditorContent"
           @showCssEditor="showCssEditor = !showCssEditor"
           @show-about-dialog="aboutDialogVisible = true"
-          @show-dialog-form="dialogFormVisible = true"
+          @show-dialog-form="insertFormDialogVisible = true"
           @show-dialog-upload-img="dialogUploadImgVisible = true"
           @startCopy=";(isCoping = true), (backLight = true)"
           @endCopy="endCopy"
@@ -69,21 +69,27 @@
     </el-container>
 
     <upload-img-dialog
-      v-model="dialogUploadImgVisible"
+      :visible="dialogUploadImgVisible"
       @close="dialogUploadImgVisible = false"
       @beforeUpload="beforeUpload"
       @uploadImage="uploadImage"
       @uploaded="uploaded"
     ></upload-img-dialog>
-    <about-dialog v-model="aboutDialogVisible"></about-dialog>
-    <insert-form-dialog v-model="dialogFormVisible"></insert-form-dialog>
+    <about-dialog
+      :visible="aboutDialogVisible"
+      @close="aboutDialogVisible = false"
+    ></about-dialog>
+    <insert-form-dialog
+      :visible="insertFormDialogVisible"
+      @close="insertFormDialogVisible = false"
+    ></insert-form-dialog>
 
     <right-click-menu
       :visible="rightClickMenuVisible"
       :left="mouseLeft"
       :top="mouseTop"
       @menuTick="onMenuEvent"
-      @closeMenu="closeRightClickMenu"
+      @closeMenu="rightClickMenuVisible = false"
     ></right-click-menu>
     <run-loading></run-loading>
   </div>
@@ -119,7 +125,7 @@ export default {
       showCssEditor: false,
       aboutDialogVisible: false,
       dialogUploadImgVisible: false,
-      dialogFormVisible: false,
+      insertFormDialogVisible: false,
       isCoping: false,
       isImgLoading: false,
       backLight: false,
@@ -563,10 +569,7 @@ export default {
       this.mouseTop = e.clientY + 10
       this.rightClickMenuVisible = true
     },
-    closeRightClickMenu() {
-      this.rightClickMenuVisible = false
-    },
-    onMenuEvent(type, info = {}) {
+    onMenuEvent(type) {
       switch (type) {
         case `resetStyle`:
           this.$refs.header.showResetConfirm = true
@@ -581,7 +584,7 @@ export default {
           this.exportEditorContent()
           break
         case `insertTable`:
-          this.dialogFormVisible = true
+          this.insertFormDialogVisible = true
           break
         case `importMarkdown`:
           this.importMarkdownContent()