鑒于百度搜索不到vant官方網址，分享一下vant組件庫官網地址，方便新手使用

vant官網地址?Vant 3 - Mobile UI Components built on Vue

這幾天在做一個h5移動端商品篩選搜索功能，用的vant的tab組件和popup組件實現的，實現后是了測試，測試人員測試登記為可優化問題，最后一個tab標簽如果改變文字內容后文字過長就無法完全顯示，需要手動向左滑動一下，才可完全顯示。

原圖與選擇后對比圖

解決思路

1.先去看vant 官方tab組件文檔

tabs 里有一個重繪的方法，果斷拿來試了試

html代碼

<van-tabs
  ref="tabResize"
  v-model="tabsActive"
  line-width="0"
  line-height="0"
  background="#f9f9fb"
  title-active-color="#fff"
  title-inactive-color="#000"
  swipe-threshold="3"
>
   <van-tab
	 v-for="(item, index) in conditionsList"
	 :key="index"
	 :title-class="{ 'temporary-style': index == 7 }"
	  >
    	<template #title>
			<div @click="onTabClick(item, index)">
				<span v-text="conditionsText(item)"></span>
				<van-icon name="arrow-down" />
			</div>
		</template>
	</van-tab>
</van-tabs>

js代碼

用的js的switch判斷是最后一個篩選項

type === 'add'代表是選中要篩選的文字內容并且點擊了確認按鈕

case 'sortType':
 if (type === 'add') {
  this.$refs.tabResize.resize() //調用vant tab組件的resize方法
} 
break

附上效果圖

實際效果

并沒有效果，tab沒有重繪，所以此方式行不通

有效解決辦法

因為我用了tab的標簽欄滾動，代碼請往上翻

?

所以我想到一個辦法，因為我的tab數據是一個數組對象，那我就每次是點擊最后一個并且是選中點擊確定后，往數組對象中push一個任意值，它自然就會像左滑動，并且顯示完全，在用js的setTimeout延遲刪除這個push項，代碼如下：

html代碼

<van-tabs
  ref="tabResize"
  v-model="tabsActive"
  line-width="0"
  line-height="0"
  background="#f9f9fb"
  title-active-color="#fff"
  title-inactive-color="#000"
  swipe-threshold="3"
>
   <van-tab
	 v-for="(item, index) in conditionsList"
	 :key="index"
	 :title-class="{ 'temporary-style': index == 7 }"
	  >
    	<template #title>
			<div @click="onTabClick(item, index)">
				<span v-text="conditionsText(item)"></span>
				<van-icon name="arrow-down" />
			</div>
		</template>
	</van-tab>
</van-tabs>

?上圖有一個關鍵點，因為我的數組對象原先長度是7，那我增加后數組長度就為8，這里說一下數組長度從0開始，所以圖中判斷的是index===7，那我們就針對加入后的最后一項做處理，因為最后一項是我們臨時添加的，所以不需要它展示出來，只為為了解決最后一個tab值改變后展示不全問題，給它動態綁定一個class

css代碼

通過vant tab的props

?:title-class="{ 'temporary-style': index == 7 }"

// <style lang="stylus">

.temporary-style
   width: 0
   padding: 0
   background: transparent

   div
    display: none

js代碼

conditionsList為tab數組對象

conditionsList.length === 8代表已經添加過一次臨時數據，因為我的原數組長度是7

conditionsList.pop() 刪除最后一項臨時添加的數據

conditionsList.push('temporaryItem') 臨時添加的數據

case 'sortType':
 if (type === 'add') {

  //為解決最后一個選中數據后文字過長展示不全問題
 if (conditionsList.length === 8) {
  conditionsList.pop()

  //這里使用setTimeout的意思是，防止多次push同一個值，始終保持原數組的長度
  setTimeout(() => {
   conditionsList.pop()
   this.$forceUpdate()
  }, 100)
 }
  conditionsList.push('temporaryItem')
}
break

最終效果對比圖

?

?

?完全顯示，到此結束。

如有更好的解決辦法，歡迎指出，謝謝！