fix(tabs): tabs auto scroll to active tab

Tencent · Oct 25, 2024 · fa495b5 · fa495b5
1 parent 067f0c2
commit fa495b5
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
@@ -119,6 +119,19 @@ export default defineComponent({
 
         lineStyle.value = style;
       }
+      if (navScroll.value) {
+        const tab = navScroll.value.querySelector<HTMLElement>(`.${activeClass}`);
+        if (!tab) return;
+        const tabLeft = tab?.offsetLeft;
+        const tabWidth = tab?.offsetWidth;
+        const navScrollScrollLeft = navScroll.value.scrollLeft;
+        const navScrollWidth = navScroll.value.offsetWidth;
+        if (tabLeft + tabWidth - navScrollScrollLeft > navScrollWidth) {
+          navScroll.value.scrollTo({ left: tabLeft + tabWidth - navScrollWidth, behavior: 'smooth' });
+        } else if (tabLeft < navScrollScrollLeft) {
+          navScroll.value.scrollTo({ left: tabLeft, behavior: 'smooth' });
+        }
+      }
     };
 
     onMounted(() => {