{site_name}

{site_name}

🌜 搜索

Vant3 DropdownMenu 是一个 Vue 组件库 Vant3 中的下拉菜单组件,用于展示多个选项供用户选择

前端 𝄐 0
vant 下拉框,vant下拉菜单不关闭,vant 上下滑动,vant sidebar,vant选项卡,vant下拉列表
Vant3 DropdownMenu 是一个 Vue 组件库 Vant3 中的下拉菜单组件,用于展示多个选项供用户选择。该组件可以通过点击触发器来打开或关闭下拉菜单,并且支持自定义菜单内容和样式。

以下是一个简单的 Vant3 DropdownMenu 的例子:

html
<template>
<van-dropdown-menu>
<van-dropdown-item v-for="item in list" :key="item.value" :title="item.text" />
</van-dropdown-menu>
</template>

<script>
export default {
data() {
return {
list: [
{ text: '选项1', value: 1 },
{ text: '选项2', value: 2 },
{ text: '选项3', value: 3 }
]
}
}
}
</script>


在上面的例子中,我们使用了 Vant3 DropdownMenu 和其子组件 VanDropdownItem 来创建一个下拉菜单。VanDropdownItem 组件用于表示菜单中的每个选项,其中 title 属性用于设置选项的显示文本,key 属性用于指定每个选项的唯一标识符。

整个下拉菜单由 VanDropdownMenu 组件包裹,我们将每个选项的 VanDropdownItem 组件作为其子元素传递给它。当用户点击触发器时,下拉菜单会弹出,显示所有选项。