el-menu彈出菜單樣式不生效的問題及解決方法

更新時間：2024年07月21日 13:48:38 作者：GIS_JH

這篇文章主要介紹了el-menu彈出菜單樣式不生效的問題及解決方法,修改彈出框元素不在 el-menu 樣式中,我們需要在 el-menu–popup 中修改樣式,具體操作代碼跟隨小編一起看看吧

1. 使用 ruoyi 項目時出現(xiàn)的問題。

<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 文檔的末尾可以看到

所以根據(jù) 彈出菜單出現(xiàn)的位置 設置樣式就可以了！在 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;
    }  
}