示例:tabs的样式是有边框有间距且有下划线的这种情况,此时点击tab的时候默认下划线滑动距离只能是tab的宽度(横向)或者高度(纵向),不包含边框和间距的距离,所以下划线和tab会错位显示。(以下以纵向tabs为例,tab的高度为36px, 边框为1px, 下边距为10px)
解决方法:
修改点击tab时下划线滑动的transfrom属性
即:
handleTabClick (tab) {
this.$nextTick(() => {
let ele = document.getElementsByClassName('el-tabs__active-bar')[0]
let distance = tab.index == 0 ? 0 : tab.index * 48 + 'px'
ele.style.transform = `translateY(${distance})`
})
}