NavMenu导航菜单
1.选中菜单的颜色
.el-menu-item.is-active {background-color: #41a3fb !important;}
2.菜单hover颜色
.el-menu-item:hover {background-color: #41a3fb !important;}
3.菜单父级的hover(父级菜单)
.el-submenu /deep/.el-submenu__title:hover {background-color: rgb(32, 39, 65) !important;// background-color: #41a3fb !important;}
4.菜单行高:
/deep/ .el-menu-item,/deep/ .el-submenu__title {height: 45px!important;line-height: 45px!important;}
使用:
<template><div class="sidebar"><el-menuclass="sidebar-el-menu":default-active="onRoutes"background-color="rgb(32, 39, 65)"text-color="hsla(0,0%,100%,.65)"active-text-color="#fff"@open="handleOpen":unique-opened="true"router@close="handleClose"><!-- :collapse="isCollapse" --><template v-for="item in menuList"><template v-if="item.children && item.children.length !== 0"><el-submenu :index="item.path ||String(item.id)" :key="item.id"><template slot="title" ><!-- <i :class="item.icon"></i> --><span slot="title" >{{ item.title }}</span></template><template v-for="subItem in item.children"><el-submenuv-if="subItem.children && subItem.children.length !== 0":index="subItem.path || String(subItem.id)":key="subItem.id"><template slot="title" >{{ subItem.title }}</template><el-menu-itemv-for="threeItem in subItem.children":key="threeItem.id":index="threeItem.path ||String(threeItem.id)">{{threeItem.title}}</el-menu-item></el-submenu><el-menu-itemv-else:index="subItem.path ||String(subItem.id)":key="subItem.id">{{ subItem.title }}</el-menu-item></template></el-submenu></template><template v-else><el-menu-item :index="item.path || String(item.id)" :key="item.id"><!-- <i :class="item.icon"></i> --><span slot="title">{{ item.title }}</span></el-menu-item></template></template></el-menu></div></template>