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>

效果图

如下图,问题已经解决