vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式

更新時(shí)間：2022年08月31日 09:52:49 作者：行動(dòng)是最好的證明

這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant-ui組件庫修改NavBar導(dǎo)航欄的樣式

Vant-ui組件中沒有改變導(dǎo)航欄的樣式的屬性，這個(gè)時(shí)候怎么辦呢

我們可以用深度選擇器/deep/ 或 ::v-deep，實(shí)現(xiàn)對(duì)組件內(nèi)部的樣式修改如下：

引用NavBar組件

<div id="div_box_nav"> 
  <van-nav-bar
    title="標(biāo)題"
    left-text="返回"
    left-arrow
   />
  </div>

引用后是顯示這個(gè)樣子的如下圖：

但是現(xiàn)在需求是要求導(dǎo)航欄背景色為藍(lán)色字體顏色圖標(biāo)顏色都為白色

我們可以這樣來修改

修改背景色這個(gè)好改寫，直接拿到導(dǎo)航欄的屬性名就可以修改

<style lass="scss" scoped>
.van-nav-bar {
  background-color: #2f97ec;
}
</style>

寫完后它就變顏色了

下邊來修改字體的顏色

<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-nav-bar__title {
  color: white;
  font-size: 0.45rem;
}
</style>

使用deep來通過外層大的div盒子id標(biāo)識(shí)定位來穿透設(shè)置原本組件的css樣式

它這個(gè)字體顏色也就改變了

最后來修改箭頭圖標(biāo)的顏色也是用上邊這個(gè)方法

<style lass="scss" scoped>
#div_boxs_lnteado /deep/ .van-icon {
  color: white;
}
</style>

最后這樣也就成功可以修改原本的樣式啦

vant組件庫,修改NavBar組件的樣式

今天在引用navbar組件的時(shí)候，發(fā)現(xiàn)沒有像Tabbar那樣能修改樣式的屬性，可以給

組件對(duì)應(yīng)的標(biāo)簽去做修改，如果不能解決，那么就要使用深度選擇器/deep/ 或 ::v-deep，實(shí)現(xiàn)對(duì)組件內(nèi)部的樣式修改

<van-nav-bar
    fixed
    :title="title"
    :right-text="text"
    @click-left="onClickLeft"
    @click-right="onClickRight"
    class="van-ellipsis"
  >
    <template #left>
      <van-icon color="#fff" name="search" size="23" v-show="showIcon" />
    </template>
  </van-nav-bar>

.van-nav-bar {
 background-color: rgb(241, 186, 66);
}
::v-deep .van-icon {
 color: #fff;
}
::v-deep .van-nav-bar__text {
 color: #fff;
}
::v-deep .van-ellipsis {
 color: #fff;
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-drag-resize與輸入框/文本框沖突問題
這篇文章主要介紹了vue-drag-resize與輸入框/文本框沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)給data函數(shù)中的屬性賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解
這篇文章主要為大家介紹了Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問題
這篇文章主要介紹了Vue安裝sass-loader和node-sass版本匹配的報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue中,在本地緩存中讀寫數(shù)據(jù)的方法
今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)"Failed?to?resolve?loader:less-loader"的解決方法,文中通過圖文介紹的非常詳細(xì),對(duì)同樣遇到這樣問題的朋友具有一定的需要的朋友可以參考下
2023-02-02
Vue?watch中監(jiān)聽值的變化,判斷后修改值方式
這篇文章主要介紹了Vue?watch中監(jiān)聽值的變化,判斷后修改值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue之父組件向子組件傳值并改變子組件的樣式
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下
2022-12-12
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue組件父子間通信之綜合練習(xí)（聊天室）
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信之綜合練習(xí)聊天室制作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11