0
点赞
收藏
分享

微信扫一扫

python logging模块

日月同辉9908 2024-09-30 阅读 27

因为自定义了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.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)`
      })
    },
举报

相关推荐

0 条评论