解決vant 框架 tab切換外掛標題樣式不能自定義問題

找到原始碼：node_modules/vant/es/tabs/Title.js

修改如下程式碼：

return h("div",{
   "attrs": {
    "role": "tab","aria-selected": this.isActive
   },"class": [bem({
    active: this.isActive,disabled: this.disabled,complete: !this.ellipsis
   }),{
    'van-ellipsis': this.ellipsis
   }],"style": this.style,"on": {
    "click": this.onClick
   }
  },[h("span",{
    "class": bem('text')
   },[this.slots() || this.title,h(Info,{
    "attrs": {
     "dot": this.dot,"info": this.info
    }
   })])]);

this.title即是標題；新增一個span標籤

<span>看情況修改</span>

[h("span","info": this.info
    }
   }),h("span","看情況修改")])]

最後在app.vue中修改樣式

.van-tabs__nav--line .van-tab .van-tab__text span{
  color:#cc0000 !important;
}

補充知識：vant樣式改不動？進入偵錯程式找生成的class類名設定樣式

vant樣式改不動？進入偵錯程式找生成的class類名設定樣式

用vue寫的專案需要注意的地方是，在scoped裡修改是無法做到修改vant樣式的，這是外部引入的。我們需要新建一個，然後在裡面用自己的類名限定住這個樣式的修改。舉例：

以上這篇vant 解決tab切換外掛標題樣式自定義的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。