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; }