el-menu弹出菜单样式不生效

1. 使用 ruoyi 项目时出现的问题。

html 复制代码
<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" 中的样式是这样的

css 复制代码
 .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 这个 样式只对 一级菜单 "高速公路" 生效! 二级菜单和 其中的选项则不能生效!

2. 解决方法

  • html 文档中 是没有 弹出菜单项(出入口收费站 -> 总流量 。。。)的。
  • 他们在 html 文档的末尾可以看到
  • 所以 根据 弹出菜单出现的位置 设置样式就可以了!在 el-menu--popup这个样式的基础上作修改
css 复制代码
.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 中修改样式!

相关推荐
JIngJaneIL9 分钟前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟2 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据2 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉2 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge3 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有3 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
sean4 小时前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636024 小时前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端
chxii4 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够4 小时前
Vue 自适应高度表格
javascript·vue.js·elementui