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

因为自定义了tab栏样式,tab下面的划线就出现了错位,调样式调了很久都差点意思,最后决定动态修改划线部分的transform样式;

代码部分:

html部分

html 复制代码
<el-tabs v-model="activeName" @tab-click="handleClick" stretch>
...
</el-tabs>

js部分

js 复制代码
handleClick(tab) {
      this.activeName = tab.name;
      // 修改el-tabs的transform滑动距离
      this.$nextTick(() => {
        const index = tab.index
        let ele = document.getElementsByClassName('el-tabs__active-bar')[0]; // 获取tab底部滑块划线元素
        let cele = document.getElementsByClassName('el-tabs__item')[index]; // 获取tab-item元素
        const rect = cele.getBoundingClientRect(); // 获取某个元素距离窗口四边的距离
        const left = rect.left;
        // console.log('cele', cele, rect, left);
        // 我页面tab有3个,这里只处理了3个tab时候的滑动距离,根据自己项目的实际情况来修改
        let distance = index == 0 ? left+18.5 : index == 1 ? left+18 : left+28.5;
        // console.log('distance--', index, distance);
        ele.style.transform = `translateX(${distance}px)`
      })
    },
相关推荐
纪元A梦21 分钟前
华为OD机试真题——通过软盘拷贝文件(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
肉肉不吃 肉2 小时前
ES6 模块化 与 CommonJS 的核心概念解析
开发语言·javascript·es6
Eliauk__2 小时前
深入剖析 Vue 双向数据绑定机制 —— 从响应式原理到 v-model 实现全解析
前端·javascript·面试
洋流2 小时前
什么?还没弄懂关键字this?一篇文章带你速通
前端·javascript
晴殇i2 小时前
for...in 循环的坑,别再用它遍历 JavaScript 数组了!
前端·javascript
海底火旺2 小时前
寻找缺失的最小正整数:从暴力到最优的算法演进
javascript·算法·面试
洋流2 小时前
JavaScript事件流机制详解:捕获、冒泡与阻止传播
前端·javascript
tjh00012 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友2 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
XU磊2602 小时前
深入理解表单---提交用户与网页交互的重要方式:GET 与 POST 的本质区别与应用实践
服务器·前端·javascript