不知道有多少人和我遇到的一样,
问题描述:
当切换按钮的语言后,由于文字数量发生改版,按钮宽度变化,被选中的按钮下方的指示线定位不准确
我没有搜索到解决方案,自己写了一个,这里分享一下,如果你有更好的方案,下方评论去,和大家分享一下。非常感谢。
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
<el-tabs ref="tabs"></el-tabs>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。