Vue中使用el-menu，点击二级菜单时一级菜单图标保持高亮
前言：
自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。
一、案例
话不多说，先直接上图
二、使用步骤
1.引入库
在main.js中引入ElementUI组件：
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2.使用el-menu
在需要菜单栏的代码中使用el-menu，代码如下（示例）：
template的数据
<template>
<div id="elmenu" class="elmenu">
<el-menu
router
background-color="#171230"
text-color="#fff"
active-text-color="#fff"
:unique-opened = uniqueOpened
is-opened>
>
<template v-for="(item, index) in menus" >
<!-- 只有一级菜单 -->
<el-menu-item v-if="!item.children" :key="index" :index="item.path" :id="item.path">
<img :src="item.path === $route.path ? item.Aicon : item.icon">
<span class="span4" slot="title">{
{
item.name}}</span>
</el-menu-item>
<!-- 有二级菜单 -->
<el-submenu v-else :key="index" :index="item.icon" :id="item.path">
<template slot="title">
<img :src="chooseIcon(item, $route.path)">
<span class="span4" slot="title">{
{
item.name}}</span>
</template>
<template v-for="(etem, index) in item.children">
<el-menu-item style="background:none; border-radius: 0" :index="etem.path" :key="index">
{
{
etem.name}}
</el-menu-item>
</template>
</el-submenu>
</template>
</el-menu>
</div>
</template>
script的数据
<script>
export default {
data() {
return {
uniqueOpened: true, // 是否只保持一个菜单打开
menus: [
{
name: '首页',
icon: require('../logo1.png'), // 未高亮图标
Aicon:require('../logo11.png'), // 高亮图标
path: '/voice/mainInterface'
},
{
name: '声纹比对',
icon: require('../logo2.png'),
Aicon:require('../logo22.png'),
children: [
{
name: '声纹1比1', path: '/voice/voiceOneOne'},
{
name: '声纹1比N', path: '/voice/voiceOneAll'},
]
},
]
}
},
methods:{
// 一级菜单图标是否高亮
chooseIcon(item, route) {
var n = 0 // 用于判断当前一级菜单下的二级菜单是否被点击
for(var i = 0; i < item.children.length; i++) {
if(item.children[i].path == route) {
n = 1
}
}
if(n == 1) {
// 被点击了，返回高亮图标
return item.Aicon
} else {
// 未被点击，返回未高亮图标
return item.icon
}
}
},
}
</script>
style的内容
<style lang="scss" scoped>
.elmenu{
width: 200px;
.el-menu{
border: none; // 解决菜单右边不对齐的问题
.span4{
color: #fff;
font-size: 14px;
margin-left: 30px;
}
img{
float: left;
width: 22px;
margin-top: 24px
}
}
/deep/ .el-menu-item.is-active{
// 被点击以后字体颜色改变
color: #409EFF !important;
.span4{
color: #439DF7;
}
}
/deep/ .el-menu-item {
height: 67px !important;
line-height: 67px;
&:hover{
.span4{
color: #439DF7;
}
}
img{
padding-left: 10px;
}
}
/deep/ .el-submenu__title{
height: 67px !important;
line-height: 67px;
img{
padding-left: 10px;
}
}
/deep/ .el-submenu.is-active .el-submenu__title {
.span4{
color: #439DF7;
}
}
// 二级菜单样式
/deep/ .el-submenu .el-menu-item {
padding: 0;
padding-left: 95px !important;
min-width: 195px;
transition:width 1s;
&:hover{
color: #439DF7 !important;
}
}
}
</style>