✨ 菜单上支持使用 el-icon 了

PanJiaChen · Mar 10, 2020 · 69bd4da · 69bd4da
1 parent a45e64f
commit 69bd4da
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 3 deletions.
diff --git a/src/components/ElIcon/index.vue b/src/components/ElIcon/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <i :class="iconName" :style="appendStyle" />
+</template>
+
+<script>
+export default {
+  name: 'ElIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    iconColor: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  computed: {
+    iconName() {
+      return `sub-el-icon el-icon-${this.iconClass}`
+    },
+    appendStyle() {
+      if (this.iconColor) {
+        return 'color: ' + this.iconColor + ';'
+      } else {
+        return ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sub-el-icon {
+  width: 1em;
+  height: 1em;
+}
+</style>
diff --git a/src/icons/index.js b/src/icons/index.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
+import ElIcon from '@/components/ElIcon'
 
 // register globally
 Vue.component('svg-icon', SvgIcon)
+Vue.component('el-icon', ElIcon)
 
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)

diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
@@ -1,4 +1,6 @@
 <script>
+import variables from '@/styles/variables.scss'
+
 export default {
   name: 'MenuItem',
   functional: true,
@@ -7,19 +9,27 @@ export default {
       type: String,
       default: ''
     },
+    elicon: {
+      type: String,
+      default: ''
+    },
     title: {
       type: String,
       default: ''
     }
   },
   render(h, context) {
-    const { icon, title } = context.props
+    const { icon, elicon, title } = context.props
     const vnodes = []
 
     if (icon) {
       vnodes.push(<svg-icon icon-class={icon}/>)
     }
 
+    if (elicon) {
+      vnodes.push(<el-icon icon-class={elicon} icon-color={variables.menuText}/>)
+    }
+
     if (title) {
       vnodes.push(<span slot='title'>{(title)}</span>)
     }

diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
@@ -3,14 +3,14 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :elicon="onlyOneChild.meta.elicon||item.meta && item.meta.elicon" :title="onlyOneChild.meta.title" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :elicon="item.meta && item.meta.elicon" :title="item.meta.title" />
       </template>
       <sidebar-item
         v-for="child in item.children"

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -57,6 +57,11 @@
       margin-right: 16px;
     }
 
+    .sub-el-icon {
+      margin-right: 13px;
+      margin-left: -1px;
+    }
+
     .el-menu {
       border: none;
       height: 100%;
@@ -105,6 +110,10 @@
         .svg-icon {
           margin-left: 20px;
         }
+
+        .sub-el-icon {
+          margin-left: 19px;
+        }
       }
     }
 
@@ -118,6 +127,10 @@
           margin-left: 20px;
         }
 
+        .sub-el-icon {
+          margin-left: 19px;
+        }
+
         .el-submenu__icon-arrow {
           display: none;
         }