vant 解决tab切换插件标题样式自定义

只会切图的前端

于 2020-07-02 10:03:36 发布

阅读量7.3k

点赞数

分类专栏： web移动端 web前端 vue 文章标签： javascript vue.js css3 html html5

本文链接：https://blog.youkuaiyun.com/qq_41786458/article/details/107077431

版权

web移动端同时被 3 个专栏收录

8 篇文章

订阅专栏

web前端

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

解决Vant框架中Tab组件标题样式无法自定义的问题，通过修改Title.js源码并添加新的span标签，实现标题颜色等样式的个性化设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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