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

更新時間：2022年08月31日 09:52:49 作者：行動是最好的證明

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

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

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

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

引用NavBar組件

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

引用后是顯示這個樣子的如下圖：

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

我們可以這樣來修改

修改背景色這個好改寫，直接拿到導(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標識定位來穿透設(shè)置原本組件的css樣式

它這個字體顏色也就改變了

最后來修改箭頭圖標的顏色也是用上邊這個方法

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

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

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

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

組件對應(yīng)的標簽去做修改，如果不能解決，那么就要使用深度選擇器/deep/ 或 ::v-deep，實現(xiàn)對組件內(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;
}

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

您可能感興趣的文章: