From 2596166e958e7144c987bdf831c8f937dbfc82a6 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 9 Aug 2021 17:06:55 +0800 Subject: [PATCH] types(DropdownItem): add DropdownItemInstance type (#9214) --- src/dropdown-item/DropdownItem.tsx | 34 ++++++++++++++++-------------- src/dropdown-item/index.ts | 2 +- src/dropdown-item/types.ts | 34 ++++++++++++++++++++++++++++++ src/dropdown-menu/DropdownMenu.tsx | 11 ++++------ src/dropdown-menu/README.md | 19 ++++++++++++++--- src/dropdown-menu/README.zh-CN.md | 13 ++++++++++++ src/dropdown-menu/index.ts | 2 +- src/dropdown-menu/types.ts | 9 ++++++++ 8 files changed, 96 insertions(+), 28 deletions(-) create mode 100644 src/dropdown-item/types.ts create mode 100644 src/dropdown-menu/types.ts diff --git a/src/dropdown-item/DropdownItem.tsx b/src/dropdown-item/DropdownItem.tsx index c5d9ec0da..51a33cdd0 100644 --- a/src/dropdown-item/DropdownItem.tsx +++ b/src/dropdown-item/DropdownItem.tsx @@ -5,6 +5,7 @@ import { TeleportProps, CSSProperties, defineComponent, + ExtractPropTypes, } from 'vue'; // Utils @@ -25,29 +26,30 @@ import { Cell } from '../cell'; import { Icon } from '../icon'; import { Popup } from '../popup'; +// Types +import type { DropdownItemOption } from './types'; + const [name, bem] = createNamespace('dropdown-item'); -export type DropdownItemOption = { - text: string; - icon?: string; - value: number | string; +const props = { + title: String, + disabled: Boolean, + teleport: [String, Object] as PropType, + lazyRender: truthProp, + modelValue: unknownProp, + titleClass: unknownProp, + options: { + type: Array as PropType, + default: () => [], + }, }; +export type DropdownItemProps = ExtractPropTypes; + export default defineComponent({ name, - props: { - title: String, - disabled: Boolean, - teleport: [String, Object] as PropType, - lazyRender: truthProp, - modelValue: unknownProp, - titleClass: unknownProp, - options: { - type: Array as PropType, - default: () => [], - }, - }, + props, emits: ['open', 'opened', 'close', 'closed', 'change', 'update:modelValue'], diff --git a/src/dropdown-item/index.ts b/src/dropdown-item/index.ts index d287e80b2..2c9fb6f90 100644 --- a/src/dropdown-item/index.ts +++ b/src/dropdown-item/index.ts @@ -5,4 +5,4 @@ const DropdownItem = withInstall(_DropdownItem); export default DropdownItem; export { DropdownItem }; -export type { DropdownItemOption } from './DropdownItem'; +export type { DropdownItemInstance, DropdownItemOption } from './types'; diff --git a/src/dropdown-item/types.ts b/src/dropdown-item/types.ts new file mode 100644 index 000000000..13636aa2d --- /dev/null +++ b/src/dropdown-item/types.ts @@ -0,0 +1,34 @@ +import type { DropdownItemProps } from './DropdownItem'; +import type { VNode, ComponentPublicInstance } from 'vue'; + +export type DropdownItemOption = { + text: string; + icon?: string; + value: number | string; +}; + +export type DropdownItemExpose = { + toggle: ( + show?: boolean, + options?: { + immediate?: boolean; + } + ) => void; + /** + * @private + */ + state: { + showPopup: boolean; + transition: boolean; + showWrapper: boolean; + }; + /** + * @private + */ + renderTitle: () => string | VNode[]; +}; + +export type DropdownItemInstance = ComponentPublicInstance< + DropdownItemProps, + DropdownItemExpose +>; diff --git a/src/dropdown-menu/DropdownMenu.tsx b/src/dropdown-menu/DropdownMenu.tsx index 17db689cb..5fea15d2d 100644 --- a/src/dropdown-menu/DropdownMenu.tsx +++ b/src/dropdown-menu/DropdownMenu.tsx @@ -1,6 +1,5 @@ import { ref, - Ref, computed, PropType, InjectionKey, @@ -21,9 +20,10 @@ import { useEventListener, } from '@vant/use'; -const [name, bem] = createNamespace('dropdown-menu'); +// Types +import type { DropdownMenuProvide, DropdownMenuDirection } from './types'; -export type DropdownMenuDirection = 'up' | 'down'; +const [name, bem] = createNamespace('dropdown-menu'); const props = { overlay: truthProp, @@ -41,10 +41,7 @@ const props = { }, }; -export type DropdownMenuProvide = { - props: ExtractPropTypes; - offset: Ref; -}; +export type DropdownMenuProps = ExtractPropTypes; export const DROPDOWN_KEY: InjectionKey = Symbol(name); diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 12a86790c..586c9873e 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -188,9 +188,22 @@ Use `active-color` prop to custom active color of the title and options. Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get DropdownItem instance and call instance methods. -| Name | Description | Attribute | Return value | -| ------ | -------------- | --------------- | ------------ | -| toggle | Toggle display | _show: boolean_ | - | +| Name | Description | Attribute | Return value | +| ------ | -------------- | ---------------- | ------------ | +| toggle | Toggle display | _show?: boolean_ | - | + +### Types + +Get the type definition of the DropdownItem instance through `DropdownItemInstance`. + +```ts +import { ref } from 'vue'; +import type { DropdownItemInstance } from 'vant'; + +const dropdownItemRef = ref(); + +dropdownItemRef.value?.toggle(); +``` ### Data Structure of Option diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 5bb3f2abb..bcd085f4d 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -196,6 +196,19 @@ export default { | --- | --- | --- | --- | | toggle | 切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传参为取反 | _show?: boolean_ | - | +### 类型定义 + +通过 `DropdownItemInstance` 获取 DropdownItem 实例的类型定义。 + +```ts +import { ref } from 'vue'; +import type { DropdownItemInstance } from 'vant'; + +const dropdownItemRef = ref(); + +dropdownItemRef.value?.toggle(); +``` + ### Option 数据结构 | 键名 | 说明 | 类型 | diff --git a/src/dropdown-menu/index.ts b/src/dropdown-menu/index.ts index 566764b3f..db2ab02a5 100644 --- a/src/dropdown-menu/index.ts +++ b/src/dropdown-menu/index.ts @@ -5,4 +5,4 @@ const DropdownMenu = withInstall(_DropdownMenu); export default DropdownMenu; export { DropdownMenu }; -export type { DropdownMenuDirection } from './DropdownMenu'; +export type { DropdownMenuDirection } from './types'; diff --git a/src/dropdown-menu/types.ts b/src/dropdown-menu/types.ts new file mode 100644 index 000000000..bef7f4620 --- /dev/null +++ b/src/dropdown-menu/types.ts @@ -0,0 +1,9 @@ +import type { Ref } from 'vue'; +import type { DropdownMenuProps } from './DropdownMenu'; + +export type DropdownMenuDirection = 'up' | 'down'; + +export type DropdownMenuProvide = { + props: DropdownMenuProps; + offset: Ref; +};