DropdownMenu 下拉菜单

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/dropdown-menu

与 PC 端的逻辑功能一样, 目的在与使用下拉方式展示更多的激活按钮. 涉及两个组件, 一个是 DropdownMenu, 一个是 DropdownItem.

• DropdownMenu 为容器, 默认会沾满一整行.
• 内部的下拉菜单使用 DropdownItem 为一个下拉菜单项. 内部的选项使用 options 来设置. 该属性需要有 text 属性, 和 value 属性.
• 当 DropdownItem 较多时, 可以在容器上使用 swipe-threshold="数字" 来使用横向滚动的容器.

基本语法:

<van-dropdown-menu>
  <van-dropdown-item></van-dropdown-item>
  <van-dropdown-item></van-dropdown-item>
</van-dropdown-menu>

注意, 绑定的数据 Value 可以是数字类型, 也可以是字符串类型. 使用时需要注意, 要带初始化值, 不同于表单数据的绑定, 没有初始值, 组件上不会展示内容, 是空白的. 因此该属性应该提供初始值.

绑定的数据类型是:

export type DropdownItemOption = {
    text: string;
    icon?: string;
    value: DropdownItemOptionValue;
};