feat: add <style-option-menu> component (#182)

src/assets/scripts/config.js

@@ -3,10 +3,12 @@ export default {
     {
       label: `无衬线`,
       value: `-apple-system-font,BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB , Microsoft YaHei UI , Microsoft YaHei ,Arial,sans-serif`,
+      desc: `Abc`,
     },
     {
       label: `衬线`,
       value: `Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif`,
+      desc: `Abc`,
     },
   ],
   sizeOption: [

src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dropdown placement="right" class="style-option-menu">
+    <div class="el-dropdown-link">
+      {{ label }}
+      <i class="el-icon-arrow-right el-icon--right"></i>
+    </div>
+    <el-dropdown-menu slot="dropdown" style="width: 200px">
+      <el-dropdown-item
+        v-for="{ value, label, desc } in options"
+        :key="value"
+        :label="label"
+        :value="value"
+        @click.native="charge(value)"
+      >
+        <i
+          class="el-icon-check"
+          :style="{ opacity: current === value ? 1 : 0 }"
+        ></i>
+        {{ label }}
+        <span class="select-item-right">{{ desc }}</span>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  name: `StyleOptionMenu`,
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    current: {
+      type: String,
+      required: true,
+    },
+    charge: {
+      type: Function,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.style-option-menu {
+  margin: 0;
+  width: 150px;
+
+  .el-dropdown-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.select-item-right {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
+</style>

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -98,101 +98,36 @@
         </span>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item class="padding-left-3">
-            <el-dropdown placement="right" class="style-option-menu">
+            <style-option-menu
-              <div class="el-dropdown-link">
+              label="字体"
-                字体
+              :options="config.builtinFonts"
-                <i class="el-icon-arrow-right el-icon--right"></i>
+              :current="selectFont"
-              </div>
+              :charge="fontChanged"
-              <el-dropdown-menu slot="dropdown" style="width: 200px">
+            ></style-option-menu>
-                <el-dropdown-item
-                  v-for="font in config.builtinFonts"
-                  :style="{ fontFamily: font.value }"
-                  :key="font.value"
-                  :label="font.label"
-                  :value="font.value"
-                  @click.native="fontChanged(font.value)"
-                >
-                  <i
-                    class="el-icon-check"
-                    :style="{ opacity: selectFont === font.value ? 1 : 0 }"
-                  ></i>
-                  <span>{{ font.label }}</span>
-                  <span class="select-item-right">Abc</span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item class="padding-left-3">
-            <el-dropdown placement="right" class="style-option-menu">
+            <style-option-menu
-              <div class="el-dropdown-link">
+              label="字号"
-                字号
+              :options="config.sizeOption"
-                <i class="el-icon-arrow-right el-icon--right"></i>
+              :current="selectSize"
-              </div>
+              :charge="sizeChanged"
-              <el-dropdown-menu slot="dropdown" style="width: 200px">
+            ></style-option-menu>
-                <el-dropdown-item
-                  v-for="size in config.sizeOption"
-                  :key="size.value"
-                  :label="size.label"
-                  :value="size.value"
-                  @click.native="sizeChanged(size.value)"
-                >
-                  <i
-                    class="el-icon-check"
-                    :style="{ opacity: selectSize === size.value ? 1 : 0 }"
-                  ></i>
-                  <span>{{ size.label }}</span>
-                  <span class="select-item-right">{{ size.desc }}</span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item class="padding-left-3">
-            <el-dropdown placement="right" class="style-option-menu">
+            <style-option-menu
-              <div class="el-dropdown-link">
+              label="颜色"
-                颜色
+              :options="config.colorOption"
-                <i class="el-icon-arrow-right el-icon--right"></i>
+              :current="selectColor"
-              </div>
+              :charge="colorChanged"
-              <el-dropdown-menu slot="dropdown" style="width: 200px">
+            ></style-option-menu>
-                <el-dropdown-item
-                  v-for="color in config.colorOption"
-                  :key="color.value"
-                  :label="color.label"
-                  :value="color.value"
-                  @click.native="colorChanged(color.value)"
-                >
-                  <i
-                    class="el-icon-check"
-                    :style="{ opacity: selectColor === color.value ? 1 : 0 }"
-                  ></i>
-                  <span>{{ color.label }}</span>
-                  <span class="select-item-right">{{ color.desc }}</span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item class="padding-left-3">
-            <el-dropdown placement="right" class="style-option-menu">
+            <style-option-menu
-              <div class="el-dropdown-link">
+              label="代码主题"
-                代码主题
+              :options="config.codeThemeOption"
-                <i class="el-icon-arrow-right el-icon--right"></i>
+              :current="selectCodeTheme"
-              </div>
+              :charge="codeThemeChanged"
-              <el-dropdown-menu slot="dropdown" style="width: 200px">
+            ></style-option-menu>
-                <el-dropdown-item
-                  v-for="code in config.codeThemeOption"
-                  :key="code.value"
-                  :label="code.label"
-                  :value="code.value"
-                  @click.native="codeThemeChanged(code.value)"
-                >
-                  <i
-                    class="el-icon-check"
-                    :style="{ opacity: selectCodeTheme === code.value ? 1 : 0 }"
-                  ></i>
-                  <span>{{ code.label }}</span>
-                  <span class="select-item-right">{{ code.desc }}</span>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
           </el-dropdown-item>
           <el-dropdown-item
             divided
@@ -288,6 +223,7 @@ import { solveWeChatImage, solveHtml } from '@/assets/scripts/converter'
 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 { mapState, mapMutations } from 'vuex'
 
 export default {
@@ -311,6 +247,7 @@ export default {
     }
   },
   components: {
+    StyleOptionMenu,
     ResetDialog,
   },
   computed: {
@@ -523,12 +460,6 @@ export default {
   flex: 1;
 }
 
-.select-item-right {
-  float: right;
-  color: #8492a6;
-  font-size: 13px;
-}
-
 .el-dropdown {
   margin: 0 10px;
 }
@@ -537,17 +468,6 @@ export default {
   cursor: pointer;
 }
 
-.style-option-menu {
-  margin: 0;
-  width: 150px;
-
-  .el-dropdown-link {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-
 .padding-left-3 {
   padding-left: 3em;
 }

src/views/CodemirrorEditor.vue

@@ -106,7 +106,7 @@
   </div>
 </template>
 <script>
-import EditorHeader from '@/components/CodemirrorEditor/EditorHeader'
+import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index'
 import AboutDialog from '@/components/CodemirrorEditor/AboutDialog'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog'
 import RightClickMenu from '@/components/CodemirrorEditor/RightClickMenu'