1
0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00

types(IndexBar): add IndexBarInstance type ()

This commit is contained in:
neverland 2021-08-12 10:15:18 +08:00 committed by GitHub
parent a589fc2d12
commit 713be26ed2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 8 deletions

@ -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<typeof props>;
};
export type IndexBarProps = ExtractPropTypes<typeof props>;
export const INDEX_BAR_KEY: InjectionKey<IndexBarProvide> = 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) {

@ -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<IndexBarInstance>();
indexBarRef.value?.scrollTo('B');
```
### IndexAnchor Slots
| Name | Description |

@ -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<IndexBarInstance>();
indexBarRef.value?.scrollTo('B');
```
### IndexAnchor Slots
| 名称 | 说明 |

@ -5,3 +5,4 @@ const IndexBar = withInstall<typeof _IndexBar>(_IndexBar);
export default IndexBar;
export { IndexBar };
export type { IndexBarInstance } from './types';

15
src/index-bar/types.ts Normal file

@ -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
>;