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

server/2024/10/20 0:23:46/

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

代码部分:
html部分

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

js部分

handleClick(tab) {this.activeName = tab.name;// 修改el-tabs的transform滑动距离this.$nextTick(() => {const index = tab.indexlet 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)`})},

http://www.ppmy.cn/server/126444.html

相关文章

Python机器学习基础前置库学习:NumPy、Pandas、Matplotlib、Seaborn

Python机器学习基础前置库学习 目录 &#x1f4ca; NumPy&#xff1a;高效的数组操作与数学计算&#x1f4c8; Pandas&#xff1a;数据处理与分析的利器&#x1f3a8; Matplotlib与Seaborn&#xff1a;数据可视化的艺术 1. &#x1f4ca; NumPy&#xff1a;高效的数组操作与数…

Chromium 使用安全 DNS功能源码分析c++

一、选项页安全dns选项如下图&#xff1a; 二、那么如何自定义安全dns功能呢&#xff1f; 1、先看前端部分代码调用 shared.rollup.jsclass PrivacyPageBrowserProxyImpl {.................................................................getSecureDnsResolverList() {re…

华为云技术深度解析:以系统性创新加速智能化升级

华为云技术深度解析&#xff1a;以系统性创新加速智能化升级 在当今数字化转型的浪潮中&#xff0c;云计算作为关键的基础设施&#xff0c;正以前所未有的速度推动着各行各业的智能化升级。作为全球领先的云服务提供商&#xff0c;华为云凭借其深厚的技术积累和创新实力&#…

springboot儿童物品共享平台的设计与实现

目录 毕设制作流程功能和技术介绍系统实现截图开发核心技术介绍&#xff1a;使用说明开发步骤编译运行代码执行流程核心代码部分展示可行性分析软件测试详细视频演示源码获取 毕设制作流程 &#xff08;1&#xff09;与指导老师确定系统主要功能&#xff1b; &#xff08;2&am…

互联网前后端分离的开发场景,一般会员和数据权限的判断是放在前端还是后端?

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…

UE5 项目缓存文件删除、版本控制说明(工程目录结构)

文章目录 前言一、项目文件示例二、缓存文件删除、版本控制说明前言 我们在拷贝项目或者使用 Git 进行版本控制,如果不对文件选择性的控制,大量缓存文件会导致传输速度变慢;或者我们的项目报错了,想要删除缓存文件又不知如何下手,哪些是可删除的,哪些又是不可删除的,本…

自定义 Git

我们可以对 Git 做一些配置。 ‍ 配置别名 有没有经常敲错命令&#xff1f;比如 git status​&#xff1f;status ​这个单词真心不好记。 如果敲 git st ​就表示 git status ​那就简单多了&#xff0c;当然这种偷懒的办法我们是极力赞成的。 我们只需要敲一行命令&…

FOC电机驱动开发踩坑记录

关键技术 SVPWM电机磁场控制电流采样park变换和Clark变换滑膜观测器&#xff08;无感FOC&#xff09; SVPWM电机磁场控制 SVPWM主要思想是通过精确的对UVW三相电流的分时控制&#xff0c;来控制转子的合成力矩&#xff0c;达到目标方向&#xff0c;常用的是6分区的设计&…