解決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樣式改不動？進入調試器找生成的class類名設置樣式
vant樣式改不動？進入調試器找生成的class類名設置樣式
用vue寫的項目需要注意的地方是，在scoped里修改是無法做到修改vant樣式的，這是外部引入的。我們需要新建一個，然后在里面用自己的類名限定住這個樣式的修改。舉例：
以上這篇vant 解決tab切換插件標題樣式自定義的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qq_41786458/article/details/107077431
