vant 解決tab切換插件標(biāo)題樣式自定義的問題

更新時間：2020年11月13日 14:58:00 作者：只會切圖的前端

這篇文章主要介紹了vant 解決tab切換插件標(biāo)題樣式自定義的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

解決vant 框架 tab切換插件標(biāo)題樣式不能自定義問題

找到源碼：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即是標(biāo)題；新增一個span標(biāo)簽

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

[h("span", {
    "class": bem('text')
   }, [this.slots() || this.title, h(Info, {
    "attrs": {
     "dot": this.dot,
     "info": this.info
    }
   }),h("span","看情況修改")])]

最后在app.vue中修改樣式

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

補充知識：vant樣式改不動？進(jìn)入調(diào)試器找生成的class類名設(shè)置樣式

vant樣式改不動？進(jìn)入調(diào)試器找生成的class類名設(shè)置樣式

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

以上這篇vant 解決tab切換插件標(biāo)題樣式自定義的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過程
這篇文章主要介紹了使用Vue和ElementUI制作一個帶有左側(cè)菜單和右側(cè)內(nèi)容區(qū)的網(wǎng)站頁面的過程,文中通過CSS樣式和深度作用符,實現(xiàn)了頁面的美化和功能的完善,需要的朋友可以參考下
2025-02-02
Vue異步更新機制及$nextTick原理的深入講解
最近在學(xué)習(xí)一些底層方面的知識,所以想做個系列嘗試去聊聊這些比較復(fù)雜又很重要的知識點,下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vue 組件簡介
這篇文章主要介紹了vue組件的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue.js項目在IE11白屏報錯的解決方法
本文主要介紹了Vue.js項目在IE11白屏報錯的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-08-08
vue移動端項目緩存問題實踐記錄
最近在做一個vue移動端項目，被緩存問題搞得頭都大了，積累了一些經(jīng)驗，特此記錄總結(jié)下，分享到腳本之家平臺，對vue移動端項目緩存問題實踐記錄感興趣的朋友跟隨小編一起看看吧
2018-10-10
Vue.js實戰(zhàn)之使用Vuex + axios發(fā)送請求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請求的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-04-04
基于Vue2.0的分頁組件
這篇文章主要為大家詳細(xì)介紹了基于Vue2.0的分頁組件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue2.x中h函數(shù)(createElement)與vue3中的h函數(shù)詳解
h函數(shù)本質(zhì)就是createElement(),h函數(shù)其實是createVNode的語法糖,返回的就是一個Js普通對象,下面這篇文章主要給大家介紹了關(guān)于vue2.x中h函數(shù)(createElement)與vue3中h函數(shù)的相關(guān)資料,需要的朋友可以參考下
2022-12-12