elementui 修改el-tabs底部滑块划线的transform滑动距离 - IT评测·应用市场-qidao123.com技术社区

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)`
})
},

复制代码