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;
}以為完事了嗎？
不不不
正常使用時效果確實(shí)達(dá)到了
但是長時間閑置頁面，再回頭看這個頁面時會出現(xiàn)
哪里來的灰色？？？
鼠標(biāo)點(diǎn)擊界面任意位置，灰色立馬消失……
我……
瘋狂百度，沒人有這種情況
但是看到別人的代碼如下：
.el-menu-item.is-active {
background-color: #247bb4 !important;
}于是嘗試著用background-color替換background
好像還真的OK了再也沒出現(xiàn)過如上情況了
然后過了好幾個月，發(fā)現(xiàn)這個現(xiàn)象還是存在
一次偶然的機(jī)會，被我捕獲到了問題哈哈哈
莫名其妙這個時候會給當(dāng)前元素加上background-color: rgb(204, 204, 204);
然后只要點(diǎn)擊屏幕，瞬間這個值會變成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>
心塞啊心塞，這個還是沒解決
因?yàn)橹苯訌?qiáng)制修改el-menu-item的背景色，會導(dǎo)致想要它變色的時候變不了了啊啊啊，腦殼痛。
直接看最終樣式修改
因?yàn)樾枰藛瓮该?，于是乎這么設(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)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3中Watch監(jiān)聽事件的使用的相關(guān)資料，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-02-02
這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對vue-router感興趣的同學(xué)，可以參考下2021-04-04
vue自定義實(shí)例化modal彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了vue自定義實(shí)例化modal彈窗,Vue.extend 屬于Vue的全局 api，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?nbsp;Vue.component寫法使用 extend 步驟要更加繁瑣一些，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁面切換并加上動畫效果的相關(guān)資料,vue的過渡動畫主要是transition標(biāo)簽的使用,配合css動畫實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06
詳解如何在vue項(xiàng)目中使用layui框架及采坑
這篇文章主要介紹了vue使用layui框架，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue element 中的table動態(tài)渲染實(shí)現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實(shí)現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue動畫打包后失效問題的解決方法,在文中給大家提到了vue-cli 打包后自定義動畫未執(zhí)行的解決方法，需要的朋友可以參考下2018-09-09
在vue3項(xiàng)目中給頁面添加水印的實(shí)現(xiàn)方法
這篇文章主要給大家介紹一下在vue3項(xiàng)目中添加水印的實(shí)現(xiàn)方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁面效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
淺談vue-props的default寫不寫有什么區(qū)別
這篇文章主要介紹了淺談vue-props的default寫不寫有什么區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08