700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > element菜单组件样式修改NavMenu导航菜单

element菜单组件样式修改NavMenu导航菜单

时间:2020-10-08 08:35:52

相关推荐

element菜单组件样式修改NavMenu导航菜单

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。