这篇博客主要介绍了如何使用CSS深度选择器对`el-menu`组件进行定制，包括水平导航菜单和子菜单的背景色、高度、行高以及激活状态下的下划线颜色。通过修改`::v-deep`和`.is-active`等选择器，实现了菜单项在鼠标悬停和点击时的视觉效果。同时，隐藏了整体和子菜单的默认下划线，以达到特定的UI设计需求。
::v-deep .el-menu-item {
background-color: #EBEEF5;
height: 20px;
line-height: 20px;
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
height: 20px;
line-height: 20px;
}
.el-submenu /deep/ .el-submenu__title {
background-color: #EBEEF5;
height: 20px;
line-height: 20px;
}
/* 整体的下划线进行隐藏 */
.el-menu.el-menu--horizontal {
border-bottom: none;
}
/* 点击出来的下划线进行隐藏 */
.el-menu-item.is-active {
border-bottom: #EBEEF5 !important;
color: rgba(0, 0, 0, 0);
}
/* 点击出来的submenu下划线进行隐藏 */
::v-deep .el-submenu.is-active .el-submenu__title {
border-bottom: #EBEEF5 !important;
}
/* //设置鼠标悬停时el-menu-item的样式 */
.el-menu-item:hover {
background-color: #EBEEF5 !important;
}
/* //设置鼠标悬停时el-submenu的样式 */
::v-deep .el-submenu:hover .el-submenu__title {
background-color: #EBEEF5 !important;
}
扫一扫
4701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
