feat:添加标题图标

src/assets/style/iconfont.less

@@ -118,3 +118,23 @@
 .icon-xiazai:before {
   content: "\e6be";
 }
+
+.icon-sanjibiaoti:before {
+  content: "\e602";
+}
+
+.icon-sijibiaoti:before {
+  content: "\e603";
+}
+
+.icon-biaoti:before {
+  content: "\e78a";
+}
+
+.icon-wujibiaoti:before {
+  content: "\e675";
+}
+
+.icon-liujibiaoti:before {
+  content: "\e676";
+}

src/components/header/components/headline-select.vue

@@ -3,10 +3,11 @@
     <ul>
       <li
         @click="$emit('select', index)"
-        v-for="(item, index) in sortList"
+        v-for="(item, index) in list"
         :key="index"
       >
-        {{ item }}
+        <span :class="['icon iconfont', `icon-${item.icon}`]"></span>
+        <span>{{ item.title }}</span>
       </li>
     </ul>
   </div>
@@ -16,21 +17,32 @@ export default {
   data() {
     return {
       list: [
-        "1级标题",
-        "2级标题",
-        "3级标题",
-        "4级标题",
-        "5级标题",
-        "6级标题",
-      ]
-    };
+        {
+          title: "一级标题",
+          icon: "yijibiaoti"
+        },
+        {
+          title: "二级标题",
+          icon: "erjibiaoti"
+        },
+        {
+          title: "三级标题",
+          icon: "sanjibiaoti"
+        },
+        {
+          title: "四级标题",
+          icon: "sijibiaoti"
         },
-  computed: {
-    sortList() {
-      return this.list.sort((a, b) => {
-        return a.charCodeAt(0) - b.charCodeAt(0);
-      });
+        {
+          title: "五级标题",
+          icon: "wujibiaoti"
+        },
+        {
+          title: "六级标题",
+          icon: "liujibiaoti"
         }
+      ]
+    };
   }
 };
 </script>
@@ -53,7 +65,7 @@ ul {
   margin-top: 2px;
   margin-bottom: 6px;
   border-top: 1px solid #e1e1e1;
-  padding-top: 4px;
+  padding-top: 6px;
   box-sizing: border-box;
   scrollbar-color: transparent transparent;
   scrollbar-width: none;
@@ -73,6 +85,10 @@ ul {
     cursor: pointer;
     height: 24px;
     line-height: 24px;
+    .iconfont {
+      display: inline-block;
+      vertical-align: bottom;
+    }
     &:hover {
       color: var(--md-editor-border-color-active);
     }

src/components/header/md-header.vue

@@ -165,7 +165,7 @@ export default {
       toolButtonList: [
         {
           name: "headline",
-          icon: "yijibiaoti",
+          icon: "biaoti",
           tip: "添加标题",
           startStr: "\n",
           endStr: "\n",