types(Tabs): add TabsInstance type (#9174)

* types(Tabs): add TabsInstance type

* types: fix

src/cascader/Cascader.tsx

@@ -7,7 +7,7 @@ import { Tabs } from '../tabs';
 import { Icon } from '../icon';
 
 // Types
-import type { TabsClickTabEventParams } from '../tabs/Tabs';
+import type { TabsClickTabEventParams } from '../tabs/types';
 
 const [name, bem, t] = createNamespace('cascader');
 

src/tab/README.md

@@ -280,6 +280,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i
 | resize | Resize Tabs when container element resized or visibility changed | - | - |
 | scrollTo | Go to specified tab in scrollspy mode | _name: string \| number_ | - |
 
+### Types
+
+Get the type definition of the Tabs instance through `TabsInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { TabsInstance } from 'vant';
+
+const tabsRef = ref<TabsInstance>();
+
+tabsRef.value?.scrollTo(0);
+```
+
 ### Tabs Slots
 
 | Name                | Description               |

src/tab/README.zh-CN.md

@@ -291,6 +291,19 @@ export default {
 | resize | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - | - |
 | scrollTo | 滚动到指定的标签页，在滚动导航模式下可用 | _name: string \| number_ | - |
 
+### 类型定义
+
+通过 `TabsInstance` 获取 Tabs 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { TabsInstance } from 'vant';
+
+const tabsRef = ref<TabsInstance>();
+
+tabsRef.value?.scrollTo(0);
+```
+
 ### Tabs Slots
 
 | 名称                | 说明           |

src/tabs/Tabs.tsx

@@ -5,7 +5,6 @@ import {
   reactive,
   nextTick,
   PropType,
-  ComputedRef,
   onActivated,
   InjectionKey,
   CSSProperties,
@@ -51,17 +50,11 @@ import { Sticky } from '../sticky';
 import TabsTitle from './TabsTitle';
 import TabsContent from './TabsContent';
 
+// Types
+import type { TabsProvide, TabsType } from './types';
+
 const [name, bem] = createNamespace('tabs');
 
-export type TabsType = 'line' | 'card';
-
-export type TabsClickTabEventParams = {
-  name: string | number;
-  title: string;
-  event: MouseEvent;
-  disabled: boolean;
-};
-
 const props = {
   color: String,
   border: Boolean,
@@ -99,13 +92,7 @@ const props = {
   },
 };
 
-export type TabsProvide = {
+export type TabsProps = ExtractPropTypes<typeof props>;
-  props: ExtractPropTypes<typeof props>;
-  setLine: () => void;
-  onRendered: (name: string | number, title?: string) => void;
-  scrollIntoView: (immediate?: boolean) => void;
-  currentName: ComputedRef<number | string | undefined>;
-};
 
 export const TABS_KEY: InjectionKey<TabsProvide> = Symbol(name);
 

src/tabs/index.ts

@@ -5,4 +5,4 @@ const Tabs = withInstall<typeof _Tabs>(_Tabs);
 
 export default Tabs;
 export { Tabs };
-export type { TabsType } from './Tabs';
+export type { TabsType, TabsInstance } from './types';

src/tabs/types.ts

@@ -0,0 +1,26 @@
+import type { ComponentPublicInstance, ComputedRef } from 'vue';
+import type { TabsProps } from './Tabs';
+
+export type TabsType = 'line' | 'card';
+
+export type TabsClickTabEventParams = {
+  name: string | number;
+  title: string;
+  event: MouseEvent;
+  disabled: boolean;
+};
+
+export type TabsProvide = {
+  props: TabsProps;
+  setLine: () => void;
+  onRendered: (name: string | number, title?: string) => void;
+  scrollIntoView: (immediate?: boolean) => void;
+  currentName: ComputedRef<number | string | undefined>;
+};
+
+export type TabsExpose = {
+  resize: () => void;
+  scrollTo: (name: number | string) => void;
+};
+
+export type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>;