May 07, 2021 Vant
app.json
index.json
defaulting
ES6
"usingComponents": {
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index"
}
<van-dropdown-menu>
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>
Page({
data: {
option1: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 },
],
option2: [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' },
],
value1: 0,
value2: 'a',
},
});
Slots allow you to customize the contents of DropdownItem, where you need to manually control the display of menus using the toggle method on the instance
<van-dropdown-menu>
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
<van-dropdown-item id="item" title="{{ itemTitle }}">
<van-cell title="{{ switchTitle1 }}">
<van-switch
slot="right-icon"
size="24px"
style="height: 26px"
checked="{{ switch1 }}"
bind:change="onSwitch1Change"
/>
</van-cell>
<van-cell title="{{ switchTitle2 }}">
<van-switch
slot="right-icon"
size="24px"
style="height: 26px"
checked="{{ switch2 }}"
bind:change="onSwitch2Change"
/>
</van-cell>
<van-button type="info" block bind:click="onConfirm">
确定
</van-button>
</van-dropdown-item>
</van-dropdown-menu>
Page({
data: {
switchTitle1: '包邮',
switchTitle2: '团购',
itemTitle: '筛选',
option1: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 },
],
value1: 0,
},
onConfirm() {
this.selectComponent('#item').toggle();
},
onSwitch1Change({ detail }) {
this.setData({ switch1: detail });
},
onSwitch2Change({ detail }) {
this.setData({ switch2: detail });
},
});
The active-color property allows you to customize the selected state color of menu titles and options
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>
Set the direction property value to up and the menu expands up
<van-dropdown-menu direction="up">
<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>
Parameters | Description | Type | The default |
---|---|---|---|
active-color | The selected state color of the menu title and options | string |
#1989fa
|
direction
v2.0.1
|
The menu expands in the direction, with an optional value
up
|
string |
down
|
z-index | Menu bar z-index level | number | string |
10
|
duration | Animation length, in seconds | number | string |
0.2
|
overlay | Whether to display the mask layer | boolean |
true
|
close-on-click-overlay | Whether to close the menu after clicking on the matte layer | boolean |
true
|
close-on-click-outside
v2.0.7
|
Whether to close the menu after clicking on an external element | boolean |
true
|
Parameters | Description | Type | The default |
---|---|---|---|
value |
The value for the currently selected item can be bound
v-model
|
number | string | - |
title | The title of the menu item | string | The currently selected item text |
options | An array of options | Option[] |
[]
|
disabled | Whether to disable the menu | boolean |
false
|
title-class | The title extra class name | string | - |
get-container
v2.2.4
|
Specify the mounted node, using an example | string | () => Element | - |
The name of the event | Description | Callback parameters |
---|---|---|
change | Click the option to trigger when the value changes | value |
open | Triggered when the menu bar is opened | - |
opened | Open the menu bar and trigger when the animation ends | - |
close | Triggered when the menu bar is closed | - |
opened | Close the menu bar and trigger when the animation ends | - |
Name | Description |
---|---|
default | The contents of the menu |
title | Custom title, dynamic rendering is not supported |
Ref allows you to get a DropdownItem instance and call the instance method, as detailed in the Component Instance Method
The method name | Description | Parameters | Returns a value |
---|---|---|---|
toggle |
Switch the menu display state,
true
for display,
false
hiding, not pass on for the opposite
|
show?: boolean | - |
The key name | Description | Type |
---|---|---|
text | Text | string |
value | Identifier | number | string |
icon | The icon name or picture link on the left | string |