feat[Menu]: menu icon support el-icon(PanJiaChen#3048)

pvtrong · Jul 22, 2022 · ab7ba17 · ab7ba17
1 parent ceb0f9a
commit ab7ba17
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
@@ -17,7 +17,11 @@ export default {
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      if (icon.includes('el-icon')) {
+        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
+      } else {
+        vnodes.push(<svg-icon icon-class={icon}/>)
+      }
     }
 
     if (title) {
@@ -27,3 +31,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.sub-el-icon {
+  color: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -25,7 +25,7 @@ import nestedRouter from './modules/nested'
  * meta : {
     roles: ['admin','editor']    control the page roles (you can set multiple roles)
     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'             the icon show in the sidebar
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
     noCache: true                if set true, the page will no be cached(default is false)
     affix: true                  if set true, the tag will affix in the tags-view
     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
@@ -197,14 +197,14 @@ export const asyncRoutes = [
     name: 'Example',
     meta: {
       title: 'Example',
-      icon: 'example'
+      icon: 'el-icon-s-help'
     },
     children: [
       {
         path: 'create',
         component: () => import('@/views/example/create'),
         name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
+        meta: { title: 'Create Article', icon: 'el-icon-s-help' }
       },
       {
         path: 'edit/:id(\\d+)',

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -57,6 +57,11 @@
       margin-right: 16px;
     }
 
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
+
     .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;
         }
@@ -178,6 +191,10 @@
     .svg-icon {
       margin-right: 16px;
     }
+    .sub-el-icon {
+      margin-right: 12px;
+      margin-left: -2px;
+    }
   }
 
   .nest-menu .el-submenu>.el-submenu__title,