el-menu弹出菜单样式不生效的问题及解决方法
作者：GIS_JH
这篇文章主要介绍了el-menu弹出菜单样式不生效的问题及解决方法,修改弹出框元素不在 el-menu 样式中,我们需要在 el-menu–popup 中修改样式,具体操作代码跟随小编一起看看吧
1. 使用 ruoyi 项目时出现的问题。
<template>
<el-menu
:default-active="activeMenu"
:collapse="false"
:unique-opened="true"
class="container"
:collapse-transition="true"
mode="horizontal"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</template>class=“container” 中的样式是这样的
.container {
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
float: left;
height: 100%;
width: 200px;
background-color: transparent !important;
overflow: hidden;
-webkit-transition: width .28s;
transition: width 0.28s;
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
box-shadow: 2px 0 6px rgba(0,21,41,.35);
.svg-icon {
margin-right: 10px;
margin-left: 3px;
}
// menu hover
.el-submenu__title {
font-size: 17px;
color: white !important;
&:hover {
background-color: transparent !important;
}
}
}2. 问题描述
.svg-icon 这个 样式只对 一级菜单 “高速公路” 生效！ 二级菜单和 其中的选项则不能生效！
3. 解决方法
html 文档中 是没有 弹出菜单项（出入口收费站 -> 总流量 。。。）的。
他们在 html 文档的末尾可以看到
所以 根据 弹出菜单出现的位置 设置样式就可以了！在 el-menu–popup这个样式的基础上作修改
.el-menu--popup {
.el-submenu__title{
background-color: #0B1423 !important;
color: #FFF !important;
}
.el-menu-item{
background-color: #0B1423 !important;
color: #FFF !important;
}
.el-menu-item:hover {
background-color: #FFF !important;
color: #0B1423 !important;
}
.el-menu-item.is-active {
background-color: #FFF !important;
color: #0B1423 !important;
}
.svg-icon {
margin-right: 10px;
margin-left: 3px;
}
}4. 总结
修改弹出框元素 不在 el-menu 样式中，我们 需要在 el-menu–popup 中修改样式！
到此这篇关于el-menu弹出菜单样式不生效的文章就介绍到这了,更多相关el-menu弹出菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！