github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tabs: scroll to active tab (#12948) 

* Tabs: fix not scrolling to active tab

* update tabs.vue
pull/12950/head
hetech 2018-09-30 15:21:34 +08:00 committed by GitHub
parent 7e29e1c66d
commit 80410b4487
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,7 +87,7 @@
const navScroll = this.$refs.navScroll; const navScroll = this.$refs.navScroll;
const activeTabBounding = activeTab.getBoundingClientRect(); const activeTabBounding = activeTab.getBoundingClientRect();
const navScrollBounding = navScroll.getBoundingClientRect(); const navScrollBounding = navScroll.getBoundingClientRect();
const navBounding = nav.getBoundingClientRect(); const maxOffset = nav.offsetWidth - navScrollBounding.width;
const currentOffset = this.navOffset; const currentOffset = this.navOffset;
let newOffset = currentOffset; let newOffset = currentOffset;
@ -97,10 +97,9 @@
if (activeTabBounding.right > navScrollBounding.right) { if (activeTabBounding.right > navScrollBounding.right) {
newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right; newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
} }
if (navBounding.right < navScrollBounding.right) {
newOffset = nav.offsetWidth - navScrollBounding.width; newOffset = Math.max(newOffset, 0);
} this.navOffset = Math.min(newOffset, maxOffset);
this.navOffset = Math.max(newOffset, 0);
}, },
update() { update() {
if (!this.$refs.nav) return; if (!this.$refs.nav) return;

4
packages/tabs/src/tabs.vue
View File

@ -45,9 +45,11 @@
}, },
currentName(value) { currentName(value) {
if (this.$refs.nav) { if (this.$refs.nav) {
this.$nextTick(_ => { this.$nextTick(() => {
this.$refs.nav.$nextTick(_ => {
this.$refs.nav.scrollToActiveTab(); this.$refs.nav.scrollToActiveTab();
}); });
});
} }
} }
}, },