vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色
el-menu-item更改導(dǎo)航菜單欄選中的背景顏色
修改element導(dǎo)航欄選中時的背景色，可以通過設(shè)置 .el-menu-item.is-active 選擇器的樣式屬性 【background-color】使用 !important 使得優(yōu)先級最大。
如下：
.el-menu-item.is-active {
background-color: #3370ff !important;
color: #fff;
span {
color: #fff !important;
}
}element的導(dǎo)航欄修改其選中時顏色的問題
修改element導(dǎo)航欄選中時的背景色，通過瀏覽器選中導(dǎo)航欄查看可知修改樣式.el-menu-item.is-active即可。
于是……
.el-menu-item.is-active {
background: #247bb4 !important;
}以為完事了嗎？
不不不
正常使用時效果確實達(dá)到了
但是長時間閑置頁面，再回頭看這個頁面時會出現(xiàn)
哪里來的灰色？？？
鼠標(biāo)點擊界面任意位置，灰色立馬消失……
我……
瘋狂百度，沒人有這種情況
但是看到別人的代碼如下：
.el-menu-item.is-active {
background-color: #247bb4 !important;
}于是嘗試著用background-color替換background
好像還真的OK了再也沒出現(xiàn)過如上情況了
然后過了好幾個月，發(fā)現(xiàn)這個現(xiàn)象還是存在
一次偶然的機會，被我捕獲到了問題哈哈哈
莫名其妙這個時候會給當(dāng)前元素加上background-color: rgb(204, 204, 204);
然后只要點擊屏幕，瞬間這個值會變成background-color: rgba(0, 0, 0, 0.1);
所以，我只要給它默認(rèn)設(shè)一下背景色就好了?。。?！
修改代碼如下：
.el-menu-item {
background-color: rgba(0, 0, 0, 0.1) !important;
}這次是真的OK了?。。?/p>
心塞啊心塞，這個還是沒解決
因為直接強制修改el-menu-item的背景色，會導(dǎo)致想要它變色的時候變不了了啊啊啊，腦殼痛。
直接看最終樣式修改
因為需要菜單透明，于是乎這么設(shè)置以后很久沒有給我蒙上一層灰了。
<el-menu router class="el-menu-vertical-demo menu-Bar" background-color="rgba(36,123,180,0.51)" text-color="#b4dbf4" active-text-color="#7BE4FF">
<navMenu :navMenus="menuData"></navMenu>
</el-menu>
.el-menu-item {
background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item.is-active {
background-color: #247bb4 !important;
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件開發(fā)props驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue中SSR的作用及使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了nuxt 頁面路由配置,主頁輪播組件開發(fā)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)或工作有所幫助2022-03-03
vue elementUi+sortable.js實現(xiàn)嵌套表格拖拽問題
這篇文章主要介紹了vue elementUi+sortable.js實現(xiàn)嵌套表格拖拽問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼
這篇文章主要介紹了vue3 高德地圖關(guān)鍵詞搜索獲取經(jīng)緯度的示例代碼,需要的朋友可以參考下2024-08-08
這篇文章主要給大家介紹了關(guān)于elementUI中Table表格問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue新建環(huán)境變量以及網(wǎng)絡(luò)請求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡(luò)請求工具axios的二次封裝詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
在Vue中通過Mustache模板引擎將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache模板引擎插值語法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
uniapp 拖拽圖片排序功能實現(xiàn) 類似于微信朋友圈效果
這篇文章主要介紹了uniapp 拖拽圖片排序功能實現(xiàn)類似于微信朋友圈,一部分是拖拽的放大做小,xy位置判定,圖片數(shù)組的插入排序,另一部分是上傳加號圖片的?定位? 動態(tài)計算分為幾列,每一個圖片大小的位置?絕對定位的計算,需要的朋友可以參考下2024-07-07