菜单图标

src/assets/fonts/demo_fontclass.html

@@ -11,67 +11,67 @@
     <div class="main markdown">
         <h1>IconFont 图标</h1>
         <ul class="icon_lists clear">
-            
+
                 <li>
                 <i class="icon iconfont icon-showpassword"></i>
                     <div class="name">show-password </div>
                     <div class="fontclass">.icon-showpassword</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-user"></i>
                     <div class="name">user</div>
                     <div class="fontclass">.icon-user</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-users"></i>
                     <div class="name">users</div>
                     <div class="fontclass">.icon-users</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-3702mima"></i>
                     <div class="name">password-b</div>
                     <div class="fontclass">.icon-3702mima</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-shangpin"></i>
                     <div class="name">06商品</div>
                     <div class="fontclass">.icon-shangpin</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-danju"></i>
                     <div class="name">25单据</div>
                     <div class="fontclass">.icon-danju</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-tijikongjian"></i>
                     <div class="name">28体积、空间</div>
                     <div class="fontclass">.icon-tijikongjian</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-morentouxiang"></i>
                     <div class="name">225默认头像</div>
                     <div class="fontclass">.icon-morentouxiang</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-baobiao"></i>
                     <div class="name">406报表</div>
                     <div class="fontclass">.icon-baobiao</div>
                 </li>
-            
+
                 <li>
                 <i class="icon iconfont icon-lock_fill"></i>
                     <div class="name">lock_fill</div>
                     <div class="fontclass">.icon-lock_fill</div>
                 </li>
-            
+
         </ul>
 
         <h2 id="font-class-">font-class引用</h2>
@@ -88,7 +88,6 @@
         <p>使用步骤如下：</p>
         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
 
-
         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>

src/components/Home.vue

@@ -12,19 +12,19 @@
         <el-menu
           background-color="#313743"
           text-color="#fff"
-          active-text-color="#ffd04b">
+          active-text-color="#3497FF">
           <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
             <!-- 一级菜单模板 -->
             <template slot="title">
               <!--图标-->
-              <i class="el-icon-location"></i>
+              <i :class="iconsObjs[item.id]"></i>
               <!--文本-->
               <span>{{item.authName}}</span>
             </template>
             <!--二级菜单-->
             <el-menu-item :index="subitem.id+''" v-for="subitem in item.children " :key="subitem.id + ''">
               <!--图标-->
-              <i class="el-icon-location"></i>
+              <i class="el-icon-menu"></i>
               <!--文本-->
               <span>{{subitem.authName}}</span>
             </el-menu-item>
@@ -42,7 +42,14 @@ export default {
   name: 'Home',
   data () {
     return {
-      menuList: []
+      menuList: [],
+      iconsObjs: {
+        125: 'iconfont icon-user',
+        103: 'iconfont icon-tijikongjian',
+        101: 'iconfont icon-shangpin',
+        102: 'iconfont icon-danju',
+        145: 'iconfont icon-baobiao'
+      }
     }
   },
   methods: {
@@ -94,4 +101,7 @@ export default {
   .el-main{
     background-color: #E9EDF1;
   }
+  .iconfont {
+    margin-right: 10px;
+  }
 </style>