perf: separation dialog component (#187)

- 分离组件
- 调整提示信息

src/components/CodemirrorEditor/EditorHeader/PostInfoDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-dialog title="发布" :visible.sync="form.dialogVisible">
+    <el-alert
+      style="margin-bottom: 1em"
+      title="注：此功能由第三方浏览器插件支持，本平台不保证安全性。"
+      type="info"
+      show-icon
+    >
+    </el-alert>
+    <el-form
+      class="postInfo"
+      label-position="right"
+      label-width="50px"
+      :model="form"
+    >
+      <el-form-item label="封面">
+        <el-input
+          v-model="form.thumb"
+          placeholder="自动提取第一张图"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="标题">
+        <el-input
+          v-model="form.title"
+          placeholder="自动提取第一个标题"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input
+          type="textarea"
+          :rows="4"
+          v-model="form.desc"
+          placeholder="自动提取第一个段落"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
+    <template slot="footer" class="dialog-footer">
+      <el-button @click="$emit('close')">取 消</el-button>
+      <el-button type="primary" @click="$emit('post')">确 定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: `PostInfoDialog`,
+  props: {
+    form: {
+      type: Object,
+    },
+  },
+}
+</script>
+
+<style scoped></style>

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -181,41 +181,12 @@
       发布
     </el-button>
 
-    <el-dialog title="发布" :visible.sync="form.dialogVisible">
-      <div class="postInfo">
-        <el-form ref="form" :model="form" label-width="80px">
-          <el-form-item label="封面">
-            <el-input
-              v-model="form.thumb"
-              placeholder="自动提取第一张图"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="标题">
-            <el-input
-              v-model="form.title"
-              placeholder="自动提取第一个标题"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="描述">
-            <el-input
-              type="textarea"
-              :rows="4"
-              v-model="form.desc"
-              placeholder="自动提取第一个段落"
-            ></el-input>
-          </el-form-item>
-          <el-form-item>
-            <div class="info">
-              注：此功能由第三方浏览器插件支持，本平台不保证安全性。
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="form.dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="post">确 定</el-button>
-      </span>
-    </el-dialog>
+    <post-info-dialog
+      :form="form"
+      @post="post"
+      @close="form.dialogVisible = false"
+    >
+    </post-info-dialog>
     <reset-dialog
       :show-reset-confirm="showResetConfirm"
       @confirm="confirmReset"
@@ -231,6 +202,7 @@ import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
 import config from '@/assets/scripts/config'
 import ResetDialog from './ResetDialog'
 import StyleOptionMenu from './StyleOptionMenu'
+import PostInfoDialog from './PostInfoDialog'
 import { mapState, mapMutations } from 'vuex'
 
 export default {
@@ -255,6 +227,7 @@ export default {
     }
   },
   components: {
+    PostInfoDialog,
     StyleOptionMenu,
     ResetDialog,
   },