如何在vant中的tab中添加"+"用來增減欄目

在使用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') //寫入跳轉事件
      }
    }

完成收工！！
接下來是跳轉到轉態管理頁
通常情況下我會采用彈性布局，接着使用justfiy-content:space-between來進行操作
一般來說我們會將頁面做成這樣子

看似不錯，然而當用戶在增減模塊的時候卻會出現如下狀況

也就是說當欄目數目 不夠，無法填充完整一欄的時候就會出現這種情況，那這種情況該如何解決，
為此我也寫了一篇博客
space-between最后一欄的填充問題（不使用v-if）