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

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

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

vant-ui組件庫(kù)修改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組件庫(kù),修改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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: