types(DropdownItem): add DropdownItemInstance type (#9214)

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 = {
+const props = {
-  text: string;
+  title: String,
-  icon?: string;
+  disabled: Boolean,
-  value: number | string;
+  teleport: [String, Object] as PropType<TeleportProps['to']>,
+  lazyRender: truthProp,
+  modelValue: unknownProp,
+  titleClass: unknownProp,
+  options: {
+    type: Array as PropType<DropdownItemOption[]>,
+    default: () => [],
+  },
 };
 
+export type DropdownItemProps = ExtractPropTypes<typeof props>;
+
 export default defineComponent({
   name,
 
-  props: {
+  props,
-    title: String,
-    disabled: Boolean,
-    teleport: [String, Object] as PropType<TeleportProps['to']>,
-    lazyRender: truthProp,
-    modelValue: unknownProp,
-    titleClass: unknownProp,
-    options: {
-      type: Array as PropType<DropdownItemOption[]>,
-      default: () => [],
-    },
-  },
 
   emits: ['open', 'opened', 'close', 'closed', 'change', 'update:modelValue'],
 

src/dropdown-item/index.ts

@@ -5,4 +5,4 @@ const DropdownItem = withInstall<typeof _DropdownItem>(_DropdownItem);
 
 export default DropdownItem;
 export { DropdownItem };
-export type { DropdownItemOption } from './DropdownItem';
+export type { DropdownItemInstance, DropdownItemOption } from './types';

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

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 = {
+export type DropdownMenuProps = ExtractPropTypes<typeof props>;
-  props: ExtractPropTypes<typeof props>;
-  offset: Ref<number>;
-};
 
 export const DROPDOWN_KEY: InjectionKey<DropdownMenuProvide> = Symbol(name);
 

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 |
+| Name   | Description    | Attribute        | Return value |
-| ------ | -------------- | --------------- | ------------ |
+| ------ | -------------- | ---------------- | ------------ |
-| toggle | Toggle display | _show: boolean_ | -            |
+| 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<DropdownItemInstance>();
+
+dropdownItemRef.value?.toggle();
+```
 
 ### Data Structure of Option
 

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<DropdownItemInstance>();
+
+dropdownItemRef.value?.toggle();
+```
+
 ### Option 数据结构
 
 | 键名  | 说明                                   | 类型               |

src/dropdown-menu/index.ts

@@ -5,4 +5,4 @@ const DropdownMenu = withInstall<typeof _DropdownMenu>(_DropdownMenu);
 
 export default DropdownMenu;
 export { DropdownMenu };
-export type { DropdownMenuDirection } from './DropdownMenu';
+export type { DropdownMenuDirection } from './types';

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<number>;
+};