1. 确定el-menu组件的当前选中状态 当el-menu组件中的某个菜单项被选中时,Element UI会自动给这个菜单项添加一个is-active类。 2. 查找el-menu选中菜单的背景色样式定义 由于Element UI没有直接提供设置选中背景色的属性,我们需要通过自定义CSS样式来实现。我们需要查找并修改.el-menu-item.is-active这个选择器的...
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="200p...
css 变量名有作用域,找到任意父元素,覆盖你需要修改的变量 & { --el-menu-text-color: #d7bbbb; --el-menu-hover-text-color: #d7bbbb; --el-menu-bg-color: #1b1da9; --el-menu-hover-bg-color: #378ae7; --el-menu-active-color: #ffffff; } 2 0 replies Sign up for free to join ...
UE+ElementUI更改导航菜单选中背景颜色 主要是设置 .el-menu-item.is-active 选择器的样式属性 官方文档中提供background-color、text-color、active-text-color三种属性 仅提供了激活菜单文字颜色,并没有提供激活菜单的其他参数 <el-menudefault-active="0"class="el-menu-vertical-demo"@open="handleOpen"@close=...
.child-item .el-menu-item{ background-color: #1F2D3D!important; } .child-item .el-menu-item:hover{ background-color: #001528!important; } .child-item .el-submenu__title{ background-color: #1F2D3D!important; } .child-item .el-submenu__title:hover{ background-color: #001528!important...
<el-menu<!--依次为菜单背景颜色、字体颜色、激活时颜色-->background-color="#2F4050" text-color="#9CB4CC" active-text-color="white" ... ><el-submenu><el-menu-item>...</el-menu-item></el-submenu></el-menu> html中已经实现了菜单的主体样式,细节样式通过下述css实现。
然后将指针移动到el-sub-menu上,但不点击,使下拉栏自动弹出; 点击下拉栏中的el-menu-item,然后观察单独的el-menu-item的背景颜色。 What is Expected? 当点击一个el-menu-item后,背景变色,但会立即或不久消失; 当点击另外的el-menu-item时,之前所点击的el-menu-item样式应该回复原状。
.child-item .el-menu-item{ background-color: #1F2D3D!important; } .child-item .el-menu-item:hover{ background-color: #001528!important; } .child-item .el-submenu__title{ background-color: #1F2D3D!important; } .child-item .el-submenu__title:hover{ background-color: #001528!important...
可以在el-sub-menu组件中通过slot来自定义submenu-item的内容,然后在该slot中嵌套一个div,将背景图片设置给该div。同时,可以通过给submenu-item设置一个绝对定位,将其置于div元素的上层,从而实现展开时不改变el-menu-item的背景。 具体实现过程如下: <template> ...
Bug Type: Style Environment Vue Version: 3.2.7 Element Plus Version: 2.2.25 Browser / OS: Chrome Build Tool: Vite Reproduction Related Component el-menu Reproduction Link Docs Steps to reproduce <!-- 切换成暗黑模式后 el-menu 失去背景色无法遮挡下层的元素