Vant中tab组件的标题如何自定义

Vant提供的tab组件样式是这样的，过于基础，一般无法满足业务中的UI效果，不过不用担心，我们可以自定义样式，接下来详细介绍如何自定义→
这是改造前的效果：

来吧！看一下改造后的效果吧

废话不多说，直接上干货：

<!--甜蜜/贡献/威望榜tab切换-->
 <van-tabs class="tab-style list-tab-style"
            v-model="active"
            swipeable
            @change="listChange">
      <van-tab v-for="item in tabList">
          <!--自定义标题（#title必不可少）-->
          <template #title>
              <div class="tmb-tab-btn">
                  <img :src="item.id == active ? item.tabUrlAct : item.tabUrl" alt="">
              </div>
          </template>
           </van-tab>
  </van-tabs>

JS部分：用来存放标题对应的图片资源，并实现切换对应tab效果

tabList:[ // 榜单图标变量
        {tabName:'甜蜜榜',id:0,
          tabUrl:`${urlPath}tmb-tab.png`,
          tabUrlAct:`${urlPath}tmb-tab-active.png`
        },
        {tabName:'贡献榜',id:1,
          tabUrl:`${urlPath}gxb-tab.png`,
          tabUrlAct:`${urlPath}gxb-tab-active.png`
        },
        {tabName:'威望榜',id:2,
          tabUrl:`${urlPath}wwb-tab.png`,
          tabUrlAct:`${urlPath}wwb-tab-active.png`}
      ],

CSS部分可根据业务场景做相应调整，/deep/是最高权重的写法，和 importent类似

 .tab-style{
       /deep/.van-tabs__wrap {
           overflow: inherit;
           background: transparent;
           border-radius: 17px;
       }
       /deep/.van-tab {
           padding: 0;
           &:nth-child(1) .tmb-stage{
               left: 10px;
           }
           &:nth-child(2) .tmb-stage{
               left: 0;
           }
           &:nth-child(3) .tmb-stage{
               left: -14px;
           }
       }
       /deep/.van-tabs__line {
           display: none;
       }
       /deep/.van-tabs__nav {
           background-color: transparent;
       }
       /deep/.van-tab__text--ellipsis{
           overflow: inherit;
       }
   }
   .tmb-tab-style{
       margin-top: 14px;
   }