test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-29 18:57:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tabs: fix activated tab is out of visual range bug (#17033)

Browse Source
This commit is contained in:
Geass 2019-08-19 17:12:21 +08:00 committed by hetech
parent 91297a9761
commit 77c77efb33
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/tabs/src/tab-nav.vue
View File

@ -85,19 +85,30 @@
const activeTab = this.$el.querySelector('.is-active');
if (!activeTab) return;
const navScroll = this.$refs.navScroll;
const isHorizontal = ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1;
const activeTabBounding = activeTab.getBoundingClientRect();
const navScrollBounding = navScroll.getBoundingClientRect();
const maxOffset = nav.offsetWidth - navScrollBounding.width;
const maxOffset = isHorizontal
? nav.offsetWidth - navScrollBounding.width
: nav.offsetHeight - navScrollBounding.height;
const currentOffset = this.navOffset;
let newOffset = currentOffset;
if (activeTabBounding.left < navScrollBounding.left) {
newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
if (isHorizontal) {
if (activeTabBounding.left < navScrollBounding.left) {
newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
}
if (activeTabBounding.right > navScrollBounding.right) {
newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
}
} else {
if (activeTabBounding.top < navScrollBounding.top) {
newOffset = currentOffset - (navScrollBounding.top - activeTabBounding.top);
}
if (activeTabBounding.bottom > navScrollBounding.bottom) {
newOffset = currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
}
}
if (activeTabBounding.right > navScrollBounding.right) {
newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
}
newOffset = Math.max(newOffset, 0);
this.navOffset = Math.min(newOffset, maxOffset);
},