配置菜单图标

kuangshp · kuangshp · commit 9b563f6fb50d · 2020-06-01T15:06:16.000+08:00
diff --git a/src/components/menus/MenuItem.vue b/src/components/menus/MenuItem.vue
@@ -3,7 +3,10 @@
     v-if="item.children && item.children.length"
     :index="item.index"
   >
-    <template slot="title">{{ item.title }}</template>
+    <span slot="title">
+      <i :class="item.icon"></i>
+      {{ item.title }}
+    </span>
     <!-- 递归使用该组件 -->
     <template v-for="(m, i) in item.children">
       <MenuItem
@@ -24,6 +27,7 @@
 <script>
 
 export default {
+  name: 'MenuItem',
   props: {
     item: Object,
     default: () => { },
diff --git a/src/store/modules/view.js b/src/store/modules/view.js
@@ -18,6 +18,36 @@ const state = {
       index: 'tabs',
       title: 'tab选项卡'
     },
+    {
+      icon: 'el-icon-folder-opened',
+      index: '3',
+      title: '表单相关',
+      children: [
+        {
+          index: 'form',
+          title: '基本表单',
+          icon: 'el-icon-s-data',
+        },
+        {
+          index: '3-2',
+          title: '三级菜单',
+          children: [
+            {
+              index: 'editor',
+              title: '富文本编辑器'
+            },
+            {
+              index: 'markdown',
+              title: 'markdown编辑器'
+            }
+          ]
+        },
+        {
+          index: 'upload',
+          title: '文件上传'
+        }
+      ]
+    },
   ],
 };
 
