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>
总结
是否高亮重点在于chooseIcon()方法。思维方法是先判断一级菜单下的二级菜单地址与当前页面的地址是否一致，如果一致则返回高亮图标，反之则返回未高亮图标。标签：el,Vue,高亮,menu,item,菜单,图标 来源： https://blog.csdn.net/Oamnij/article/details/120455760
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。