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

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

@ -88,7 +88,6 @@
<p>使用步骤如下：</p> <p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3> <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> <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> <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> <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 <el-menu
background-color="#313743" background-color="#313743"
text-color="#fff" text-color="#fff"
active-text-color="#ffd04b"> active-text-color="#3497FF">
<el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id"> <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
<!-- 一级菜单模板 --> <!-- 一级菜单模板 -->
<template slot="title"> <template slot="title">
<!--图标--> <!--图标-->
<i class="el-icon-location"></i> <i :class="iconsObjs[item.id]"></i>
<!--文本--> <!--文本-->
<span>{{item.authName}}</span> <span>{{item.authName}}</span>
</template> </template>
<!--二级菜单--> <!--二级菜单-->
<el-menu-item :index="subitem.id+''" v-for="subitem in item.children " :key="subitem.id + ''"> <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> <span>{{subitem.authName}}</span>
</el-menu-item> </el-menu-item>
@ -42,7 +42,14 @@ export default {
name: 'Home', name: 'Home',
data () { data () {
return { 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: { methods: {
@ -94,4 +101,7 @@ export default {
.el-main{ .el-main{
background-color: #E9EDF1; background-color: #E9EDF1;
} }
.iconfont {
margin-right: 10px;
}
</style> </style>