如何在vant中的tab中添加“+“用来增减栏目

在使用vant时，有时候我们需要设置tab栏目，我们会选择使用vant中的tab标签页

像是这样：

首先：

给栏目设置一个padding值，腾出一个位置给‘+’

/deep/.van-sticky{
  padding-right: 50px;
}

变成这样

然后给这个容器加一个伪元素，因为这个tab栏是引入vant组件操作的，不好改结构，只能从它的样式下手

/deep/.van-sticky{
  padding-right: 50px;
  &::after{
    content: '+';
    position: absolute;
    width: 51px;
    height: 44px;
    background-color: #fff;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 42px;
    font-size: 35px;
  }
}

效果就出来了

接着给栏目管理 这个‘ + ’添加入口，在mounted里面添加

document.querySelector('.van-sticky').onclick=e=>{  //只能是箭头函数，不然this指向不对
       console.log(e.target.className);  //看点击的是哪个元素
           if(e.target.className==='van-sticky'){  //除了'+'其他都是van-tab__text
                this.$router.push('/cateManager')   //路由跳转
               }
             }

ok!