Tabs: fix activated tab is out of visual range bug

ElemeFE · Aug 14, 2019 · e293b23 · e293b23
1 parent 75f0eb8
commit e293b23
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/packages/tabs/src/tab-nav.vue b/packages/tabs/src/tab-nav.vue
@@ -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 (activeTabBounding.right > navScrollBounding.right) {
-          newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+        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);
+          }
         }
-
         newOffset = Math.max(newOffset, 0);
         this.navOffset = Math.min(newOffset, maxOffset);
       },