修改el-tabs的transform滑动距离_element plus el-tabs transform 如何计算的

作者：不正经 | 2024-04-08 06:31:02

踩

element plus el-tabs transform 如何计算的

示例：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})`

　　　　})

　　}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/383579?site