快捷導(dǎo)航

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

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

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

1. 使用 ruoyi 項(xiàng)目時(shí)出現(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 這個(gè) 樣式只對(duì) 一級(jí)菜單 “高速公路” 生效！二級(jí)菜單和其中的選項(xiàng)則不能生效！

3. 解決方法

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

他們在 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題
這篇文章主要介紹了解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-12
淺談vue同一頁面中擁有兩個(gè)表單時(shí),的驗(yàn)證問題
今天小編就為大家分享一篇淺談vue同一頁面中擁有兩個(gè)表單時(shí),的驗(yàn)證問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解vue如何獲取當(dāng)前系統(tǒng)時(shí)間
這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時(shí)間,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01
Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導(dǎo)致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue實(shí)現(xiàn)計(jì)步器功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)步器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
vue-element內(nèi)table插入超鏈接a標(biāo)簽的使用
在Vue Element的table組件中插入超鏈接,可以使用<el-link>標(biāo)簽替代傳統(tǒng)的<a>標(biāo)簽,實(shí)現(xiàn)更加整潔的UI設(shè)計(jì),具體操作是替換原有的<span>標(biāo)簽,直接使用<el-link>進(jìn)行超鏈接的插入,使得鏈接樣式與Element UI保持一致
2024-09-09
Vue2.0 事件的廣播與接收(觀察者模式)
這篇文章主要介紹了Vue2.0 事件的廣播與接收(觀察者模式)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
Vue.js實(shí)戰(zhàn)之Vuex的入門教程
這篇文章主要給大家介紹了Vue.js實(shí)戰(zhàn)之Vuex的入門教程，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。
2017-04-04
Vue Element前端應(yīng)用開發(fā)之常規(guī)Element界面組件
在我們開發(fā)BS頁面的時(shí)候，往往需要了解常規(guī)界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對(duì)話框、表單處理、條碼二維碼等等，本篇隨筆基于普通表格業(yè)務(wù)的展示錄入的場景介紹這些常規(guī)Element組件的使用
2021-05-05
基于vue的video播放器的實(shí)現(xiàn)示例
這篇文章主要介紹了基于vue的video播放器的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02