diff --git a/packages/vant/src/dropdown-menu/DropdownMenu.tsx b/packages/vant/src/dropdown-menu/DropdownMenu.tsx index 98c013e4e..92123a96e 100644 --- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx +++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx @@ -22,6 +22,7 @@ import { // Composables import { useId } from '../composables/use-id'; +import { useExpose } from '../composables/use-expose'; import { useRect, useChildren, @@ -75,11 +76,15 @@ export default defineComponent({ } }); + const close = () => { + children.forEach((item) => { + item.toggle(false); + }); + }; + const onClickAway = () => { if (props.closeOnClickOutside) { - children.forEach((item) => { - item.toggle(false); - }); + close(); } }; @@ -142,6 +147,7 @@ export default defineComponent({ ); }; + useExpose({ close }); linkChildren({ id, props, offset, updateOffset }); useClickAway(root, onClickAway); useEventListener('scroll', onScroll, { diff --git a/packages/vant/src/dropdown-menu/README.md b/packages/vant/src/dropdown-menu/README.md index c4a3d0cdf..409df491c 100644 --- a/packages/vant/src/dropdown-menu/README.md +++ b/packages/vant/src/dropdown-menu/README.md @@ -59,7 +59,7 @@ export default { ### Custom Content ```html - + @@ -86,7 +86,8 @@ import { ref } from 'vue'; export default { setup() { - const item = ref(null); + const menuRef = ref(null); + const itemRef = ref(null); const value = ref(0); const switch1 = ref(false); const switch2 = ref(false); @@ -97,10 +98,13 @@ export default { ]; const onConfirm = () => { item.value.toggle(); + // or + // menuRef.value.close(); }; return { - item, + menuRef, + itemRef, value, switch1, switch2, @@ -183,6 +187,14 @@ Use `active-color` prop to custom active color of the title and options. | default | Content | | title | Custom title | +### DropdownMenu Methods + +Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get DropdownMenu instance and call instance methods. + +| Name | Description | Attribute | Return value | +| ----- | ------------------------ | --------- | ------------ | +| close | Close all dropdown items | - | - | + ### DropdownItem Methods Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get DropdownItem instance and call instance methods. @@ -201,18 +213,21 @@ import type { DropdownItemProps, DropdownItemOption, DropdownItemInstance, + DropdownMenuInstance, DropdownMenuDirection, } from 'vant'; ``` -`DropdownItemInstance` is the type of component instance: +`DropdownMenuInstance` and `DropdownItemInstance` are the types of component instances: ```ts import { ref } from 'vue'; -import type { DropdownItemInstance } from 'vant'; +import type { DropdownMenuInstance, DropdownItemInstance } from 'vant'; +const dropdownMenuRef = ref(); const dropdownItemRef = ref(); +dropdownMenuRef.value?.close(); dropdownItemRef.value?.toggle(); ``` diff --git a/packages/vant/src/dropdown-menu/README.zh-CN.md b/packages/vant/src/dropdown-menu/README.zh-CN.md index ce4dcddac..8421a8cab 100644 --- a/packages/vant/src/dropdown-menu/README.zh-CN.md +++ b/packages/vant/src/dropdown-menu/README.zh-CN.md @@ -58,12 +58,12 @@ export default { ### 自定义菜单内容 -通过插槽可以自定义 `DropdownItem` 的内容,此时需要使用实例上的 `toggle` 方法手动控制菜单的显示。 +通过插槽可以自定义 `DropdownItem` 的内容,此时需要使用 `DropdownMenu` 实例上的 `close` 或指定 `DropdownItem` 的 `toggle` 方法手动控制菜单的显示。 ```html - + - +