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

Posted 2021-02-20 axu1997

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

效果如下

我们可以控制他的多个属性，而且可以选择是否滑动切换等，十分方便

然而有时候我们需要做这种业务：

而vant中的tab没有这个功能我们则需要自己进行配置

首先将tab的宽度进行限制，给+留出空间

/deep/.van-tabs__wrap {
  width: 88vw;
}

之后可以选择用一个div来装一个+，然而我在此处需要使用粘性布局，自己写一个时发现这个定位问题很难解决，

所以采取了第二种方法

我在其中使用了sticky属性，所以使用伪类的 方式来添加这个+

/deep/.van-sticky::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 32px;
  color: black;
  line-height: 40px;
  width: 12vw;
  text-align: center;
}

这时候会有 一个问题，如何设置跳转，

此时无法在模板中使用@click方法进行跳转

所以我这里采取的是在组件挂载完毕之后使用dom操作来实现,

发现此处可以使用事件委托的方式进行操作，

在mounted中写入

document.querySelector(‘.van-sticky‘).onclick = e => { //点击整个.vant-sticky
      console.log(e.target.className)//这里可以试试点击不同位置，输出的点击目标是哪个
      if (e.target.className === ‘van-sticky‘) {
			this.$router.push(‘/addCategory‘) //写入跳转事件
      }
    }

完成收工！！