From 795de3dd51294ef91dd45ad1d49de3e0b25a4a06 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 3 Aug 2021 20:30:21 +0800
Subject: [PATCH] types(Tabs): add TabsInstance type (#9174)

* types(Tabs): add TabsInstance type

* types: fix
---
 src/cascader/Cascader.tsx |  2 +-
 src/tab/README.md         | 13 +++++++++++++
 src/tab/README.zh-CN.md   | 13 +++++++++++++
 src/tabs/Tabs.tsx         | 21 ++++-----------------
 src/tabs/index.ts         |  2 +-
 src/tabs/types.ts         | 26 ++++++++++++++++++++++++++
 6 files changed, 58 insertions(+), 19 deletions(-)
 create mode 100644 src/tabs/types.ts

diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index d1d420b0a..88e48292c 100644
--- a/src/cascader/Cascader.tsx
+++ b/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');
 
diff --git a/src/tab/README.md b/src/tab/README.md
index 93d3cf308..938e2fdb6 100644
--- a/src/tab/README.md
+++ b/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               |
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index e8df50f05..754e427fa 100644
--- a/src/tab/README.zh-CN.md
+++ b/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
 
 | 名称                | 说明           |
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index 5417fc47a..6241191f5 100644
--- a/src/tabs/Tabs.tsx
+++ b/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 = {
-  props: ExtractPropTypes<typeof props>;
-  setLine: () => void;
-  onRendered: (name: string | number, title?: string) => void;
-  scrollIntoView: (immediate?: boolean) => void;
-  currentName: ComputedRef<number | string | undefined>;
-};
+export type TabsProps = ExtractPropTypes<typeof props>;
 
 export const TABS_KEY: InjectionKey<TabsProvide> = Symbol(name);
 
diff --git a/src/tabs/index.ts b/src/tabs/index.ts
index dfe9c9100..d5b1592c4 100644
--- a/src/tabs/index.ts
+++ b/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';
diff --git a/src/tabs/types.ts b/src/tabs/types.ts
new file mode 100644
index 000000000..55ac0d450
--- /dev/null
+++ b/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>;