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