feat(tabs): add scrollPosition API (Tencent#4269)

betavs · Jun 8, 2024 · 44e77c1 · 44e77c1
1 parent ff40e3b
commit 44e77c1
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 84 deletions.
diff --git a/src/tabs/_example-ts/combination.vue b/src/tabs/_example-ts/combination.vue
@@ -1,12 +1,16 @@
 <template>
-  <t-space direction="vertical" style="width: 100%" size="32px">
-    <t-space>
-      <t-radio-group v-model="theme" variant="default-filled">
-        <t-radio-button value="normal">常规型</t-radio-button>
-        <t-radio-button value="card">卡片型</t-radio-button>
-      </t-radio-group>
-    </t-space>
-    <t-tabs v-model="value" :theme="theme">
+  <t-space direction="vertical" style="width: 100%">
+    <t-radio-group v-model="theme" variant="default-filled">
+      <t-radio-button value="normal">常规型</t-radio-button>
+      <t-radio-button value="card">卡片型</t-radio-button>
+    </t-radio-group>
+    <t-radio-group v-model="scrollPosition" variant="default-filled">
+      <t-radio-button value="auto">Auto</t-radio-button>
+      <t-radio-button value="start">Start</t-radio-button>
+      <t-radio-button value="center">Center</t-radio-button>
+      <t-radio-button value="end">End</t-radio-button>
+    </t-radio-group>
+    <t-tabs v-model="value" :theme="theme" :scroll-position="scrollPosition">
       <t-tab-panel v-for="index in 30" :key="index" :value="index + ''" :label="`选项卡${index}`">
         <p style="padding: 25px">选项卡{{ index }}</p>
       </t-tab-panel>
@@ -19,4 +23,5 @@ import { ref } from 'vue';
 import { TabsProps } from 'tdesign-vue-next';
 const value = ref('22');
 const theme = ref<TabsProps['theme']>('normal');
+const scrollPosition = ref<TabsProps['scrollPosition']>('auto');
 </script>
diff --git a/src/tabs/_example/combination.vue b/src/tabs/_example/combination.vue
@@ -1,12 +1,16 @@
 <template>
-  <t-space direction="vertical" style="width: 100%" size="32px">
-    <t-space>
-      <t-radio-group v-model="theme" variant="default-filled">
-        <t-radio-button value="normal">常规型</t-radio-button>
-        <t-radio-button value="card">卡片型</t-radio-button>
-      </t-radio-group>
-    </t-space>
-    <t-tabs v-model="value" :theme="theme">
+  <t-space direction="vertical" style="width: 100%">
+    <t-radio-group v-model="theme" variant="default-filled">
+      <t-radio-button value="normal">常规型</t-radio-button>
+      <t-radio-button value="card">卡片型</t-radio-button>
+    </t-radio-group>
+    <t-radio-group v-model="scrollPosition" variant="default-filled">
+      <t-radio-button value="auto">Auto</t-radio-button>
+      <t-radio-button value="start">Start</t-radio-button>
+      <t-radio-button value="center">Center</t-radio-button>
+      <t-radio-button value="end">End</t-radio-button>
+    </t-radio-group>
+    <t-tabs v-model="value" :theme="theme" :scroll-position="scrollPosition">
       <t-tab-panel v-for="index in 30" :key="index" :value="index + ''" :label="`选项卡${index}`">
         <p style="padding: 25px">选项卡{{ index }}</p>
       </t-tab-panel>
@@ -19,4 +23,5 @@ import { ref } from 'vue';
 
 const value = ref('22');
 const theme = ref('normal');
+const scrollPosition = ref('auto');
 </script>
diff --git a/src/tabs/props.ts b/src/tabs/props.ts
@@ -31,6 +31,15 @@ export default {
       return ['left', 'top', 'bottom', 'right'].includes(val);
     },
   },
+  /** Tab较多的时候，选中滑块滚动最终停留的位置 */
+  scrollPosition: {
+    type: String as PropType<TdTabsProps['scrollPosition']>,
+    default: 'auto' as TdTabsProps['scrollPosition'],
+    validator(val: TdTabsProps['scrollPosition']): boolean {
+      if (!val) return true;
+      return ['auto', 'start', 'center', 'end'].includes(val);
+    },
+  },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdTabsProps['size']>,

diff --git a/src/tabs/tab-nav.tsx b/src/tabs/tab-nav.tsx
@@ -33,6 +33,7 @@ export default defineComponent({
     action: Array,
     value: tabProps.value,
     placement: tabProps.placement,
+    scrollPosition: tabProps.scrollPosition,
     size: tabProps.size,
     disabled: tabProps.disabled,
     addable: tabProps.addable,
@@ -163,7 +164,7 @@ export default defineComponent({
 
     const handleActiveTabScroll = () => {
       setTimeout(() => {
-        setOffset(calculateOffset(getRefs(), scrollLeft.value, 'auto'));
+        setOffset(calculateOffset(getRefs(), scrollLeft.value, props.scrollPosition));
       }, 0);
     };
 
@@ -175,6 +176,7 @@ export default defineComponent({
 
     // watch
     watch([() => props.placement, () => props.panels], getMaxScrollLeft);
+    watch([() => props.scrollPosition], handleActiveTabScroll);
 
     // life times
     useResize(debounce(getMaxScrollLeft), navsContainerRef.value);

diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
 name | type | default | description | required
@@ -11,6 +12,7 @@ disabled | Boolean | false | \- | N
 dragSort | Boolean | false | \- | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
 placement | String | top | options: left/top/bottom/right | N
+scrollPosition | String | auto | The final position where the tab item stops scrolling after being selected.。options: auto/start/center/end | N
 size | String | medium | options: medium/large | N
 theme | String | normal | options: normal/card | N
 value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tabs/type.ts) | N
@@ -29,6 +31,7 @@ change | `(value: TabValue)` | \-
 drag-sort | `(context: TabsDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/>
 remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | \-
 
+
 ### TabPanel Props
 
 name | type | default | description | required

diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
@@ -1,16 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 action | String / Slot / Function | - | 选项卡右侧的操作区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 addable | Boolean | false | 选项卡是否可增加 | N
 disabled | Boolean | false | 是否禁用选项卡 | N
 dragSort | Boolean | false | 是否开启拖拽调整顺序 | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
 placement | String | top | 选项卡位置。可选项：left/top/bottom/right | N
+scrollPosition | String | auto | Tab较多的时候，选中滑块滚动最终停留的位置。可选项：auto/start/center/end | N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 theme | String | normal | 选项卡风格，包含 默认风格 和 卡片风格两种。可选项：normal/card | N
 value | String / Number | - | 激活的选项卡值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`TabValue` `type TabValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tabs/type.ts) | N
@@ -29,9 +31,10 @@ change | `(value: TabValue)` | 激活的选项卡发生变化时触发
 drag-sort | `(context: TabsDragSortContext)` | 拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tabs/type.ts)。<br/>`interface TabsDragSortContext { currentIndex: number; current: TabValue; targetIndex: number; target: TabValue }`<br/>
 remove | `(options: { value: TabValue; index: number; e: MouseEvent })` | 删除选项卡时触发
 
+
 ### TabPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 default | Slot / Function | - | 用于自定义选项卡导航，同 panel。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N

diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
@@ -78,6 +78,7 @@ export default defineComponent({
         size: props.size,
         disabled: props.disabled,
         placement: props.placement,
+        scrollPosition: props.scrollPosition,
         addable: props.addable,
         panels: panelsData,
         dragSort: props.dragSort,

diff --git a/src/tabs/type.ts b/src/tabs/type.ts
@@ -35,6 +35,11 @@ export interface TdTabsProps {
    * @default top
    */
   placement?: 'left' | 'top' | 'bottom' | 'right';
+  /**
+   * Tab较多的时候，选中滑块滚动最终停留的位置
+   * @default auto
+   */
+  scrollPosition?: 'auto' | 'start' | 'center' | 'end';
   /**
    * 组件尺寸
    * @default medium