van-tabs和el-tabs组件底部横条偏移问题

发布时间 2023-09-13 01:36:06作者: 李云蹊

问题描述:

在使用Vant的<van-tabs>组件或者elementUi的<el-tabs>组件时,在首次加载的时候底部选中横条会出现偏移,本问题在官方文档中有给出解决方法

 解决办法:

加上v-if控制tabs组件的显示,在mounted钩子函数中写入setTimeout即可

<van-tabs v-if="vTabs" v-model="cityName" color="#5A64F6" background="#f5f6fa" @change="changeTabs">
      <van-tab class="fangCang" name="" title=""></van-tab>
</van-tabs>
 
mounted () {
    setTimeout(() => { // 解决vant-tab组件官方问题:底部条位置错误
      this.vTabs = true
    }, 10)
},