xing/vue-learn
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

菜单图标

Browse Source
This commit is contained in:
xing 2020-06-17 10:38:05 +08:00
parent 47a1bce8f9
commit 56cac05818
2 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/assets/fonts/demo_fontclass.html
View File

@ -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>

18
src/components/Home.vue
View File

@ -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>