vant tabs組件選中下劃線位置異常

vue vant tabs組件選中下劃線位置異常

• 問題描述
• 代碼片段
• 原因分析
• 解決方案
• 修改後代碼
• 效果圖

問題描述

在使用vant中Tab 標籤, 點擊顯示會出現下劃線位置異常,如下圖:

代碼片段

<template>
  <div id="app">
    <van-button type="primary" @click="isShow = !isShow">點擊顯示</van-button>
    <div v-show="isShow">
      <van-tabs v-model="active">
        <van-tab title="標籤 1">內容 1</van-tab>
        <van-tab title="標籤 2">內容 2</van-tab>
        <van-tab title="標籤 3">內容 3</van-tab>
        <van-tab title="標籤 4">內容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      active: 0,
      isShow: false,
    };
  }
};
</script>

原因分析

問題出現的原因是 Tab 掛載的時候會初始化並獲取自身寬度，如果處於隱藏狀態下，Tab 是獲取不到自身寬度的，因此底部條的位置沒法正確計算。

解決方案

在展示 Tab 的時候，調用 Tab 實例上的 resize 方法。

修改後代碼

<template>
  <div id="app">
    <van-button type="primary" @click="isShow = !isShow">點擊顯示</van-button>
    <div v-show="isShow">
      <van-tabs ref="tabs" v-model="active">
        <van-tab title="標籤 1">內容 1</van-tab>
        <van-tab title="標籤 2">內容 2</van-tab>
        <van-tab title="標籤 3">內容 3</van-tab>
        <van-tab title="標籤 4">內容 4</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      active: 0,
      isShow: false,
    };
  },
  watch: {
    isShow(val) {
      this.$nextTick(() => {
        this.$refs.tabs.resize();
      });
    },
  },
};
</script>

效果圖

如下圖,問題已經解決