elementui 修改el-tabs底部滑块划线的transform滑动距离

因为自界说了tab栏样式，tab下面的划线就出现了错位，调样式调了很久都差点意思，最后决定动态修改划线部门的transform样式；
代码部门：
html部门

1. <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
2. ...
3. </el-tabs>

复制代码

js部门

1. handleClick(tab) {
2.       this.activeName = tab.name;
3.       // 修改el-tabs的transform滑动距离
4.       this.$nextTick(() => {
5.         const index = tab.index
6.         let ele = document.getElementsByClassName('el-tabs__active-bar')[0]; // 获取tab底部滑块划线元素
7.         let cele = document.getElementsByClassName('el-tabs__item')[index]; // 获取tab-item元素
8.         const rect = cele.getBoundingClientRect(); // 获取某个元素距离窗口四边的距离
9.         const left = rect.left;
10.         // console.log('cele', cele, rect, left);
11.         // 我页面tab有3个，这里只处理了3个tab时候的滑动距离，根据自己项目的实际情况来修改
12.         let distance = index == 0 ? left+18.5 : index == 1 ? left+18 : left+28.5;
13.         // console.log('distance--', index, distance);
14.         ele.style.transform = `translateX(${distance}px)`
15.       })
16.     },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。