项目过程中使用vant组件使用踩坑记录

业务场景: 项目使用vue3+ts搭建, 使用 vant @4 版本

遇到的问题: 使用vant-tabs组件时发现指定 active 激活项没有效果, 初始化激活的下划线位置偏左.

经查阅官方文档 vant

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置

解决方法: 使用 v-if 解决此问题

<van-tabs v-if="show" />import { ref, onMounted } from 'vue'const show = ref(false)onMounted(() => { show.value = true })