快捷導(dǎo)航

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

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

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

1. 使用 ruoyi 項(xiàng)目時(shí)出現(xiàn)的問(wè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. 問(wèn)題描述

.svg-icon 這個(gè) 樣式只對(duì) 一級(jí)菜單 “高速公路” 生效！二級(jí)菜單和其中的選項(xiàng)則不能生效！

3. 解決方法

html 文檔中是沒(méi)有彈出菜單項(xiàng)（出入口收費(fèi)站 -> 總流量。。。）的。

他們?cè)?html 文檔的末尾可以看到

所以根據(jù) 彈出菜單出現(xiàn)的位置 設(shè)置樣式就可以了！在 el-menu–popup這個(gè)樣式的基礎(chǔ)上作修改

.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. 總結(jié)

修改彈出框元素不在 el-menu 樣式中，我們需要在 el-menu–popup 中修改樣式！

到此這篇關(guān)于el-menu彈出菜單樣式不生效的文章就介紹到這了,更多相關(guān)el-menu彈出菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計(jì)
這篇文章主要為大家介紹了vue實(shí)現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計(jì)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue.js標(biāo)簽頁(yè)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁(yè)組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一
2019-10-10
vue從零實(shí)現(xiàn)一個(gè)消息通知組件的方法詳解
這篇文章主要介紹了vue從零實(shí)現(xiàn)一個(gè)消息通知組件的方法,結(jié)合實(shí)例形式分析了vue實(shí)現(xiàn)消息通知組件的具體原理、實(shí)現(xiàn)步驟、與相關(guān)操作技巧,需要的朋友可以參考下
2020-03-03
詳解Vue生命周期和MVVM框架
MVVM是Model-View-ViewModel的縮寫(xiě)，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07
使用Vue3實(shí)現(xiàn)交互式雷達(dá)圖的代碼實(shí)現(xiàn)
雷達(dá)圖是一種可視化數(shù)據(jù)的方式,用于比較多個(gè)類(lèi)別中不同指標(biāo)的相對(duì)值,它適用于需要展示多個(gè)指標(biāo)之間的關(guān)系和差異的場(chǎng)景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達(dá)圖,需要的朋友可以參考下
2024-06-06
Vue注冊(cè)組件命名時(shí)不能用大寫(xiě)的原因淺析
這段時(shí)間一直在弄vue，當(dāng)然也遇到很多問(wèn)題，這里就來(lái)跟大家分享一些注冊(cè)自定義模板組件的心得 ,需要的朋友可以參考下
2019-04-04
Element Backtop回到頂部的具體使用
這篇文章主要介紹了Element Backtop回到頂部的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
淺談vue首屏加載優(yōu)化
這篇文章主要介紹了淺談vue首屏加載優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
Vite多環(huán)境配置及變量識(shí)別規(guī)則
這篇文章主要為大家介紹了Vite多環(huán)境配置時(shí)間及vite識(shí)別環(huán)境變量的規(guī)則,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09