feat(tabs): scroll the active tab to the center position (#1663)

* feat(tabs): scroll the active tab to the center position #1648 * test: fixed the issue in the tabs test case where 'scrollTo is not a function', and fix eslint * fix: fix lint * fix: fix test unit --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Jan 13, 2025 · 9140653 · 9140653
1 parent 93b8e85
commit 9140653
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/cascader/__test__/index.test.jsx b/src/cascader/__test__/index.test.jsx
@@ -7,6 +7,9 @@ import Radio from '../../radio/index';
 import { Tabs as TTabs, TabPanel as TTabPanel } from '../../tabs';
 import prefixConfig from '../../config';
 
+// scrollTo isn't implemented in JSDOM，see: https://github.com/vuejs/vue-test-utils/issues/319
+Element.prototype.scrollTo = () => {};
+
 const { prefix } = prefixConfig;
 
 config.global.stubs = {

diff --git a/src/tabs/__test__/index.test.jsx b/src/tabs/__test__/index.test.jsx
@@ -7,6 +7,9 @@ import { sleep } from '../../shared/util';
 import Sticky from '../../sticky/index';
 import { trigger } from '../../image-viewer/__test__/touch';
 
+// scrollTo isn't implemented in JSDOM，see: https://github.com/vuejs/vue-test-utils/issues/319
+Element.prototype.scrollTo = () => {};
+
 const prefix = 't';
 const name = `${prefix}-tabs`;
 const list = [
@@ -60,7 +63,7 @@ describe('Tabs', () => {
       let theme = '';
       const wrapper = mount(Tabs, {
         props: {
-          theme: theme,
+          theme,
         },
       });
       const navWrap = wrapper.find(`.${name}__wrapper`);
@@ -160,7 +163,7 @@ describe('Tabs', () => {
       };
       const wrapper = mount(Tabs, {
         props: {
-          size: size,
+          size,
         },
       });
       const $tabs = wrapper.findComponent(Tabs);

diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
@@ -126,13 +126,9 @@ export default defineComponent({
         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' });
-        }
+        const scrollDistance = tabLeft - navScrollWidth / 2 + tabWidth / 2;
+        navScroll.value.scrollTo({ left: scrollDistance, behavior: 'smooth' });
       }
     };