Al usar el-menu en Vue, el ícono del menú de primer nivel permanece resaltado al hacer clic en el menú de segundo nivel.
Prefacio:
Cuando estaba escribiendo un proyecto, escribí sobre la barra de menú. Descubrí que cuando solo existe el menú de primer nivel, es fácil cambiar el ícono resaltado del menú de primer nivel. Pero cuando hay un segundo Menú de nivel debajo del menú de primer nivel, haga clic en el menú de segundo nivel. Al ingresar a un menú, los íconos del menú de primer nivel no se pueden resaltar. Después de investigar un poco, descubrí que el-menu no tiene esta función, después de pensarlo mucho, encontré un método y lo registré.
1. Caso
Sin más, vayamos directo a la imagen.
2. Pasos de uso
1. Importar la biblioteca
Introduzca el componente ElementUI en main.js:
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2. Utilice el menú
Utilice el-menu en código que requiera una barra de menú. El código es el siguiente (ejemplo):
datos de plantilla
<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>
datos del guión
<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>
contenido de estilo
<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>