修改el-tabs的下划线的transform属性,达到修改滑动距离的效果

示例:tabs的样式是有边框有间距且有下划线的这种情况,此时点击tab的时候默认下划线滑动距离只能是tab的宽度(横向)或者高度(纵向),不包含边框和间距的距离,所以下划线和tab会错位显示。(以下以纵向tabs为例,tab的高度为36px, 边框为1px, 下边距为10px)

解决方法:

  修改点击tab时下划线滑动的transfrom属性

  即:

  handleTabClick (tab) {

    this.$nextTick(() => {

        let ele = document.getElementsByClassName('el-tabs__active-bar')[0]
        let distance = tab.index == 0 ? 0 : tab.index * 48 + 'px'
        ele.style.transform = `translateY(${distance})`
    })

  }

posted @ 2022-06-09 15:14  搬砖的苦行僧  阅读(2614)  评论(0编辑  收藏  举报