<style scoped> /* 为当前激活的菜单项设置背景色 */ .el-menu-item--active { background-color: #409EFF; /* 你可以根据需要修改这个颜色值 */ color: #fff; /* 通常也会修改文字颜色以提高可读性 */ } </style> 确保你在<style>标签中使用了scoped属性,这样可以确保你的...
active-text-color 是选中的文本颜色 这句话设置选中的背景颜色 .el-menu-item.is-active { background-color: #ccff00!important;} <template> <div class="common-layout"> <!-- 全屏的关键:height: 100vh --> <el-container style=" height: 100vh"> <el-aside style="background-color: #191970;...
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 :default-active="activeRouter" router :uniqueOpened="true" :collapse="isCollapse" background-color="#fff" text-color="#333" active-text-color="#FF8244" > <sidebar-item v-for="item in routes" :key="item.path" :route="item" ></sidebar-item> </el-menu> </template> <scri...
/* 修改菜单项的文字颜色 */.el-menu-item{color:#ff0000;/* 红色 */}/* 修改菜单项的背景颜色 */.el-menu-item:hover{background-color:#00ff00;/* 绿色 */}/* 修改选中菜单项的文字颜色 */.el-menu-item.is-active{color:#0000ff;/* 蓝色 */}/* 修改选中菜单项的背景颜色 */.el-menu-it...
有子集:用的是el-submenu标签包template标签指定名字跟很多个el-menu-item标签 没子集:直接用很多个el-menu-item标签 得出上述规律,我们就能使用递归组件方式去封装一个动态菜单 动态菜单代码 外层菜单部分 html部分: <el-menu :default-active="activeIndex" class="elMenu" background-color="#333" text-color=...
create-menu(:menus='menus' default-active='xx' style='width:210px' @select='handleSelect') 水平菜单和其他属性 如果觉得还需要什么功能,优先去官网看看。 想要水平菜单:mode='horizontal' 想设置菜单的背景色、文字色、激活菜单的文字色(夜间模式):background-color="#545c64" text-color="#fff" acti...
<el-menu :default-active="activeIndex"class="elMenu"background-color="#333"text-color="#B0B0B2"active-text-color="#fff":unique-opened="true"router ref="elMenu"@select="menuSelect"> <!-- 递归动态菜单 --><myitem:data="menuArr"></myitem></el-menu> ...
background-color | 菜单的背景颜色(十六进制格式)(已被废弃,使用--bg-color) 按照上面组件描述,我不想使用background-color属性设置背景颜色(已被废弃),那--bg-color方式怎么用呢? 我用<el-menu style="--bg-color:red" >...</el_menu>也没有效果啊! 那位大神给个提示,不知道哪里出错了! 2 ...
<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实现。