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...
1、router属性,若使用router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color,background-color属性为下拉菜单整体的背景颜色 4、text-color,text-color为下拉菜单中的文字的颜色 5、active-text-color为选中的菜单的颜色 <el-menu>标签中可以有...
问题是elementUI的el-menu组件提供了一个默认高亮的属性default-active,当页面刷新后default-active的值就会成为默认给的值,解决这个只用取出当前页的路由然后赋值给activeIndex即可,代码如下: <el-menu :default-active="activeIndex" mode="horizontal" :router="true" background-color="#091639" text-color="#ff...
用<el-menu-item> </el-menu-item>标签 包裹的 , 里面的标签<i> </i> 是图标没什么说的, 那个标签<span> </span>就是导航栏最顶上一层的一级导航(没有子导航栏的),我们来看一下效果: <el-menu default-active="1" background-color="#333744" text-color="#fff" active-text-color="#ffd04b...
在这个例子中,text-color 设置了默认字体颜色为 #bfcbd9,而 active-text-color 设置了激活状态下的字体颜色为 #409EFF。 3. 局部样式覆盖 如果你只想在某个特定的组件或页面中修改 el-menu 的字体颜色,可以使用局部样式覆盖。这通常通过在组件的 <style scoped> 部分添加样式规则来实现。
由如下代码可知,<el-menu-item :index="child.path"中path表示点击时激活的路由,而我们现在做的是要同步以下路由,我们要改变的是<el-menu>的:default-active="activePath"属性 <el-menu:uniqueOpened="true"class="el-menu-vertical-demo"text-color="#fff"background-color="#272727"active-text-color="#ffd...
<el-scrollbar ref="scrllbar" style="width:100%; height: 200px" wrap-class="scrollbar-wrapper"> <el-menu ref="menu" :collapse="collapseStatus" :unique-opened="uniqueOpened" :active-text-color="activeColor" :collapse-transition="false" @open="handleOpen" @close="handleClose" @select="ha...
<el-menu> 1、router属性，若使⽤router属性menu-item的index将对应router的path属性 2、mode,下拉菜单的模式分为horizontal和vertical两种模式 3、background-color，background-color属性为下拉菜单整体的背景颜⾊ 4、text-color，text-color为下拉菜单中的⽂字的颜⾊ 5、active-text-color为选中的菜单的颜...
但是最后饶了一圈还是回到了原点,就是添加一个element-plus官网上关于e-menu中的一个属性设置 <el-menu:text-color="$store.getters.globalCss.menuText":background-color="$store.getters.globalCss.menuBg":active-text-color="$store.getters.globalCss.menuActiveText":default-active="MenuActive":collapse=...
但是最后饶了一圈还是回到了原点,就是添加一个element-plus官网上关于e-menu中的一个属性设置 <el-menu:text-color="$store.getters.globalCss.menuText":background-color="$store.getters.globalCss.menuBg":active-text-color="$store.getters.globalCss.menuActiveText":default-active="MenuActive":collapse=...