DropdownMenu 下拉菜单

基础用法

  1.   <van-dropdown-item v-model="value1" :options="option1" />
  2.   <van-dropdown-item v-model="value2" :options="option2" />
  3. </van-dropdown-menu>

自定义菜单内容

  1. <van-dropdown-menu>
  2.   <van-dropdown-item v-model="value" :options="option" />
  3.   <van-dropdown-item title="筛选" ref="item">
  4.     <van-cell center title="包邮">
  5.       <template #right-icon>
  6.         <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
  7.       </template>
  8.     </van-cell>
  9.     <van-cell center title="团购">
  10.       <template #right-icon>
  11.         <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
  12.     </van-cell>
  13.     <div style="padding: 5px 16px;">
  14.       <van-button type="danger" block round @click="onConfirm">
  15.         确认
  16.       </van-button>
  17.     </div>
  18.   </van-dropdown-item>
  19. </van-dropdown-menu>

自定义选中态颜色

  1. <van-dropdown-menu active-color="#1989fa">
  2.   <van-dropdown-item v-model="value1" :options="option1" />
  3.   <van-dropdown-item v-model="value2" :options="option2" />
  4. </van-dropdown-menu>

禁用菜单

  1. <van-dropdown-menu>
  3. </van-dropdown-menu>

API

DropdownMenu Props

DropdownItem Props

参数说明类型默认值
value当前选中项对应的 value，可以通过v-model双向绑定number | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
lazy-render v2.8.5是否在首次展开时才渲染菜单内容booleantrue
title-class标题额外类名string-
get-container指定挂载的节点，用法示例string | () => Element-

DropdownItem Slots

名称说明
default菜单内容
title自定义标题，不支持动态渲染

DropdownItem 方法

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string