DropdownMenu 下拉菜单

基础用法

  1.   <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  2.   <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
  3. </van-dropdown-menu>

自定义菜单内容

  1. <van-dropdown-menu>
  2.   <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  3.   <van-dropdown-item id="item" title="{{ itemTitle }}">
  4.     <van-cell title="{{ switchTitle1 }}">
  5.       <van-switch
  6.         slot="right-icon"
  7.         size="24px"
  9.         checked="{{ switch1 }}"
  10.         bind:change="onSwitch1Change"
  11.     </van-cell>
  12.     <van-cell title="{{ switchTitle2 }}">
  13.       <van-switch
  14.         slot="right-icon"
  15.         size="24px"
  16.         style="height: 26px"
  17.         checked="{{ switch2 }}"
  18.         bind:change="onSwitch2Change"
  19.       />
  20.     </van-cell>
  21.     <van-button type="info" block bind:click="onConfirm">
  23.     </van-button>
  24. </van-dropdown-menu>
<van-dropdown-menu active-color="#ee0a24">
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>

向上展开

禁用菜单

<van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
</van-dropdown-menu>

API

DropdownItem Props

DropdownItem Events

Data Structure of Option