vant 解決tab切換插件標題樣式自定義的問題
更新時間：2020年11月13日 14:58:00 作者：只會切圖的前端
這篇文章主要介紹了vant 解決tab切換插件標題樣式自定義的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
解決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", {
"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樣式改不動？進入調(diào)試器找生成的class類名設(shè)置樣式
vant樣式改不動？進入調(diào)試器找生成的class類名設(shè)置樣式
用vue寫的項目需要注意的地方是，在scoped里修改是無法做到修改vant樣式的，這是外部引入的。我們需要新建一個，然后在里面用自己的類名限定住這個樣式的修改。舉例：
以上這篇vant 解決tab切換插件標題樣式自定義的問題就是小編分享給大家的全部內(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
最近在學(xué)習(xí)一些底層方面的知識,所以想做個系列嘗試去聊聊這些比較復(fù)雜又很重要的知識點,下面這篇文章主要給大家介紹了關(guān)于Vue異步更新機制及$nextTick原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue組件的相關(guān)資料，文中講解非常細致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對話框清空驗證,清除form表單的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文主要介紹了Vue.js項目在IE11白屏報錯的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
最近在做一個vue移動端項目，被緩存問題搞得頭都大了，積累了一些經(jīng)驗，特此記錄總結(jié)下，分享到腳本之家平臺，對vue移動端項目緩存問題實踐記錄感興趣的朋友跟隨小編一起看看吧2018-10-10
Vue.js實戰(zhàn)之使用Vuex + axios發(fā)送請求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請求的相關(guān)資料，文中介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要為大家詳細介紹了基于Vue2.0的分頁組件的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
五分鐘教你使用vue-cli3創(chuàng)建項目(新手入門)
本文主要介紹了五分鐘教你使用vue-cli3創(chuàng)建項目，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下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