1. 确定el-menu组件的当前选中状态 当el-menu组件中的某个菜单项被选中时,Element UI会自动给这个菜单项添加一个is-active类。 2. 查找el-menu选中菜单的背景色样式定义 由于Element UI没有直接提供设置选中背景色的属性,我们需要通过自定义CSS样式来实现。我们需要查找并修改.el-menu-item.is-active这个选择器的...
这句话设置选中的背景颜色 .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="200px"><LeftMenu></LeftMenu></el-as...
background-color | 菜单的背景颜色(十六进制格式)(已被废弃,使用--bg-color) 按照上面组件描述,我不想使用background-color属性设置背景颜色(已被废弃),那--bg-color方式怎么用呢? 我用<el-menu style="--bg-color:red" >...</el_menu>也没有效果啊! 那位大神给个提示,不知道哪里出错了! 2 Answered...
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=...
<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{background-color:RGB(38,87,227)!important; } //设置选鼠标指针浮动在一级菜单的设置.el-menu-item:hover{background-color: aqua!important;; } //设置当前被选中的一级菜单.el-menu-item.is-active{color:#fff!important;background: bl...
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的。 <el-menu routerdefault-active="/"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> image.png 如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页...
想要水平菜单:mode='horizontal' 想设置菜单的背景色、文字色、激活菜单的文字色(夜间模式):background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" 只想有一个子菜单展开:unique-opened 打开子菜单的方式可以设置hover:menu-trigger='hover' 不要折叠的动画效果::collapse-transition='fa...
el-menu 方法/步骤 1 在Element中提供了NavMenu组件可以为网站提供导航功能的菜单，这里我们主要来研究下侧边折叠导航栏菜单的功能实现，Element提供了一个简单的示例，属性我们可以参考Element官网的NavMenu 导航菜单说明：2 简单介绍下该示例，这里el-menu定义了当前的导航菜单及属性，el-submenu定义了子菜单栏，el-...
.el-menu-item.is-active { background-color: rgb(56,96,226) !important; color: white; } 点击有子元素的菜单时不会变色,下面可以实现: (点击有子元素菜单时,会有一个class属性is-opened,所以给其编辑样式即可) .is-opened >.el-sub-menu__title span{/*background-color: rgb(56, 96, 226) !