vant下拉菜单不关闭,vant 上下滑动,vant sidebar,vant拖拽,vant选项卡,vant下拉列表
Vant4 是一款基于 Vue.js 开发的移动端 UI 组件库，其中的 DropdownMenu 是一个下拉菜单组件，可以用于实现点击或悬浮触发的下拉菜单效果。

该组件可以接受一个数组作为菜单项，每个菜单项可以包含一个或多个子菜单。可以通过设置 trigger 属性来指定触发方式，支持 click（点击）和 hover（悬浮）两种触发方式。此外，还可以设置 placement 属性来控制下拉菜单的位置。

以下是一个简单的 Vant4 DropdownMenu 的示例代码：

html
<template>
<van-dropdown-menu :menus="menus" v-model:active="activeMenu">
<span>{{ activeMenu }}</span>
</van-dropdown-menu>
</template>

<script>
export default {
data() {
return {
menus: [
{ text: '选项一' },
{ text: '选项二', children: [{ text: '子选项一' }, { text: '子选项二' }] },
{ text: '选项三' },
],
activeMenu: '',
};
},
};
</script>


在上述示例中，我们定义了一个包含三个菜单项的下拉菜单，其中第二个菜单项包含两个子菜单项。同时，我们通过 v-model:active 来绑定了 activeMenu 变量，用于记录当前选中的菜单项。在页面上，我们使用了一个 span 元素作为触发器，并将 activeMenu 变量的值显示在该元素中。当用户点击或悬浮触发器时，会弹出下拉菜单供用户选择。