element-ui的tabs页签页组件在使用vue-i18n切换语言后,按钮宽度发生变化之后定位不准确解决方案

不知道有多少人和我遇到的一样,
问题描述:

当切换按钮的语言后,由于文字数量发生改版,按钮宽度变化,被选中的按钮下方的指示线定位不准确

image.png

image.png

我没有搜索到解决方案,自己写了一个,这里分享一下,如果你有更好的方案,下方评论去,和大家分享一下。非常感谢。

resetTabActivePosition($el) {
    setTimeout(() => {
        var activeEl = $el.querySelector('.el-tabs__item.is-active');
        var lineEl = $el.querySelector('.el-tabs__active-bar');
        var style = getComputedStyle(activeEl);
        var pl = style.paddingLeft.match(/\d+/)[0] * 1;
        var pr = style.paddingRight.match(/\d+/)[0] * 1;
        var w = style.width.match(/\d+/)[0] * 1;
        lineEl.style.transform = 'translateX(' + (activeEl.offsetLeft + pl) + 'px)';
        lineEl.style.width = (w - pl - pr)+'px';
    }, 100)
}
    

watch: {
    currentLang(){
        resetTabActivePosition(this.$refs.tabs.$el)
    }
}

在组件中绑定ref

你可能感兴趣的:(element-ui,i18n,vue.js)