怎么更改vant组件的样式,vant tabs显示内容

　　本文主要介绍vant对tab switch插件的表头样式定制问题的解决方案，有很好的参考价值，希望对大家有所帮助。来和边肖一起看看吧。

　　以解决vant框架标签切换插件标题样式无法定制的问题。

　　找到源代码：node _ modules/vant/es/tabs/title . js。

　　修改以下代码：

　　return h(div ，{

　　属性:

　　角色:标签，

　　“选定的咏叹调”:this.isActive

　　},

　　class: [bem({

　　active: this.isActive，

　　禁用：this.disabled，

　　完成：this .省略

　　}), {

　　凡-省略号:this .省略号

　　}],

　　 style: this.style

　　在:{

　　 click: this.onClick

　　}

　　}，[h(span ，{

　　 class :BEM(“text”)

　　}，[this.slots() this.title，h(Info，{

　　属性:

　　点:this.dot，

　　 info: this.info

　　}

　　})])]);

　　This.title是标题；添加一个范围标签。

　　Span，根据情况变化/span

　　[h(span ，{

　　 class :BEM(“text”)

　　}，[this.slots() this.title，h(Info，{

　　属性:

　　点:this.dot，

　　 info: this.info

　　}

　　})、h(span 、视情况而定)]]]

　　最后，在app.vue中修改样式。范标签_ _导航线。范-塔布。van-tab__text span{

　　颜色：#cc0000！重要；

　　}

　　补充知识：vant样式改不动？进入调试器找生成的class类名设置样式

　　Vant风格不能改？进入调试器查找生成的类名并设置样式。

　　关于用vue写的项目需要注意的是，无法通过在scoped中修改vant style，这是从外部引入的。我们需要创建一个新的样式，然后用我们自己的类名来限制对这个样式的修改。示例：

　　以上vant解决tab切换插件标题样式定制问题的方法，就是边肖分享的全部内容。希望能给你一个参考，多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。