el-menu组件只是在点击跟元素时,根元素变色,如图: .el-menu-item.is-active { background-color: rgb(56,96,226) !important; color: white; } 点击有子元素的菜单时不会变色,下面可以实现: (点击有子元素菜单时,会有一个class属性is-opened,所以给其编辑样式即可) .is-opened >.el-sub-menu__title s...
el-menu-item.is-active水滴状样式 要为`el-menu-item.is-active`添加水滴状样式,您可以使用CSS的伪元素和背景属性来实现。以下是一个示例样式,您可以根据需要进行调整: ```css .el-menu-item.is-active::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20...
你也可以手动设置菜单项的激活状态,通过绑定`:default-active`属性或者通过设置`is-active`属性。这样,当菜单项满足激活条件时,`is-active`样式将会生效。 ```html <template> <el-menu :default-active="activeIndex" mode="horizontal"> <el-menu-item index="1" :is-active="isActive('/path')">Item ...
/*子菜单active*/.page-sidebar .el-menu-item.is-active .iconfont-cahnge { color: #cc0000!important; }/*主菜单和子菜单同active*/.page-sidebar .el-submenu.is-active>.el-submenu__title { color: #cc0000!important; } .page-sidebar .el-submenu.is-active>.el-submenu__title .iconfont { c...
active-text-color 是选中的文本颜色 这句话设置选中的背景颜色 .el-menu-item.is-active { background-color: #ccff00!important; } <template><divclass="common-layout"><!--全屏的关键:height:100vh--><el-containerstyle=" height: 100vh"><el-asidestyle="background-color: #191970;"width="200...
Vue3使用递归组件封装El-Menu多级菜单 <template> <aside class="menu"> <el-scrollbar> <el-menu class="menu-main" router :default-active="route.path" unique-opened background-color="#18214C" text-color="#fff"> <menuItem v-for="item in menuList" :item="item" :key="item.path" />...
isActive: true, index: '0-1-1-2', child: [ { label: '选项1', isActive: true, index: '0-1-1-2-0', child: [], }, ], }, ], }, ], }, ], }, ], 三、部分实现代码如下: menuTest.vue文件 <template> <div style="width: 700px; height: 500px;"> ...
element 导航栏 鼠标移入 和 选中的 颜色变化 鼠标移入: .el-menu-item:hover { color: #a0cfff; background-color: #eaeeff !important; } 选中: .el-menu-item.is-active { color: #6681fa; background-color: #eaeeff !important; }
当el-menu 组件中的某个菜单项被选中时,Element UI 会自动给这个菜单项添加一个 is-active 类。因此,我们可以通过修改这个类的样式来改变选中背景色。 b. 编写自定义CSS 在你的Vue组件的 <style> 标签中,或者在一个全局的CSS文件中,添加以下样式代码: css .el-menu-item.is-active { background-co...
.el-menu--horizontal > .el-menu-item { width:50%; border-bottom: none; height: 1rem; line-height:0.5rem; text-align: center; } .el-menu--horizontal > .el-menu-item.is-active { border-bottom: none; } 1. 2. 3. 4. 5. ...