由于el-menu里面的图标都是一些内定的,很多时候我们都需要修改自定义,可以用自定义的图片得到效果,先上效果图:
- 可以通过将li标签改成img的方式,使用自定义的图片
<template>
<div>
<el-col :span="12">
<h5>默认颜色</h5>
<!-- default-active配置为当前路由,this.$route.path是当前路由,-->
<el-menu
:default-active="$route.path"
active-text-color="orange"
class="el-menu-vertical-demo"
router
>
<el-menu-item v-for="item in allmenu" :index="item.index">
<img v-if="$route.path==item.index" class="icon" :src="item.iconActive"></img>
<img v-else class="icon" :src="item.icon"></img>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
</template>
- 这里使用v-if 及v-else判断当前路由,由此改变当前的图片的颜色保持跟菜单项名字颜色变化一致。
- 还需要做的是去iconfont里面找两种颜色不同的图片,可以放到两个文件夹中,将路径放到传入的allmenu(菜单传的参数)中,注意这里要加require,否则不生效
let res={
data:[
{ index:"/index/data",
icon:require("@/assets/icon/notActive/data.png"),
iconActive:require("@/assets/icon/active/data.png"),
name:"统计数据"
}
]
}
this.allmenu=res.data