diff --git a/src/index-bar/IndexBar.tsx b/src/index-bar/IndexBar.tsx index f2b0288d4..6edb291ce 100644 --- a/src/index-bar/IndexBar.tsx +++ b/src/index-bar/IndexBar.tsx @@ -35,6 +35,9 @@ import { import { useTouch } from '../composables/use-touch'; import { useExpose } from '../composables/use-expose'; +// Types +import { IndexBarProvide } from './types'; + function genAlphabet() { const charCodeOfA = 'A'.charCodeAt(0); const indexList = Array(26) @@ -61,9 +64,7 @@ const props = { }, }; -export type IndexBarProvide = { - props: ExtractPropTypes; -}; +export type IndexBarProps = ExtractPropTypes; export const INDEX_BAR_KEY: InjectionKey = Symbol(name); @@ -200,11 +201,8 @@ export default defineComponent({ ); }); - const scrollTo = (index: string) => { - if (!index) { - return; - } - + const scrollTo = (index: string | number) => { + index = String(index); const match = children.find((item) => String(item.index) === index); if (match) { diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 789f6eef1..2a4f3e83d 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -99,6 +99,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get IndexB | --- | --- | --- | --- | | scrollTo | scroll to target element | _index: number \| string_ | - | +### Types + +Get the type definition of the IndexBar instance through `IndexBarInstance`. + +```ts +import { ref } from 'vue'; +import type { IndexBarInstance } from 'vant'; + +const indexBarRef = ref(); + +indexBarRef.value?.scrollTo('B'); +``` + ### IndexAnchor Slots | Name | Description | diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index 860c8c1b7..afe4b923f 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -103,6 +103,19 @@ export default { | -------- | -------------- | ------------------------- | ------ | | scrollTo | 滚动到指定锚点 | _index: number \| string_ | - | +### 类型定义 + +通过 `IndexBarInstance` 获取 IndexBar 实例的类型定义(从 3.2.0 版本开始支持)。 + +```ts +import { ref } from 'vue'; +import type { IndexBarInstance } from 'vant'; + +const indexBarRef = ref(); + +indexBarRef.value?.scrollTo('B'); +``` + ### IndexAnchor Slots | 名称 | 说明 | diff --git a/src/index-bar/index.ts b/src/index-bar/index.ts index 0498535c6..a7fba0bb0 100644 --- a/src/index-bar/index.ts +++ b/src/index-bar/index.ts @@ -5,3 +5,4 @@ const IndexBar = withInstall(_IndexBar); export default IndexBar; export { IndexBar }; +export type { IndexBarInstance } from './types'; diff --git a/src/index-bar/types.ts b/src/index-bar/types.ts new file mode 100644 index 000000000..b7a155ba5 --- /dev/null +++ b/src/index-bar/types.ts @@ -0,0 +1,15 @@ +import type { ComponentPublicInstance } from 'vue'; +import type { IndexBarProps } from './IndexBar'; + +export type IndexBarProvide = { + props: IndexBarProps; +}; + +export type IndexBarExpose = { + scrollTo: (index: string | number) => void; +}; + +export type IndexBarInstance = ComponentPublicInstance< + IndexBarProps, + IndexBarExpose +>;