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)`
      })
    },
相关推荐
市民中心的蟋蟀1 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭1 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
Mintopia1 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face1 小时前
事件循环
前端·javascript
谦谦橘子1 小时前
服务端渲染原理解析
前端·javascript·react.js
Mintopia1 小时前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
ElasticPDF-新国产PDF编辑器1 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Dontla2 小时前
函数柯里化(Currying)介绍(一种将接受多个参数的函数转换为一系列接受单一参数的函数的技术)
前端·javascript
xixixin_2 小时前
为什么 js 对象中引用本地图片需要写 require 或 import
开发语言·前端·javascript
uhakadotcom2 小时前
Zustand状态管理库:轻量级、高效的React解决方案
前端·javascript·面试