vant 下拉框样式_Vant DropdownMenu 下拉菜单
引入
在app.json或index.json中引入组件，默认为ES6版本，"usingComponents": {
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index"
}
代码演示
基础用法
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',
},
});
自定义菜单内容
通过插槽可以自定义DropdownItem的内容，此时需要使用实例上的toggle方法手动控制菜单的显示
slot="right-icon"
size="24px"
style="height: 26px"
checked="{{ switch1 }}"
bind:change="onSwitch1Change"
/>
slot="right-icon"
size="24px"
style="height: 26px"
checked="{{ switch2 }}"
bind:change="onSwitch2Change"
/>
确定
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 });
},
});
自定义选中态颜色
通过active-color属性可以自定义菜单标题和选项的选中态颜色
向上展开
将direction属性值设置为up，菜单即可向上展开
禁用菜单
API
DropdownMenu Props参数说明类型默认值active-color菜单标题和选项的选中态颜色string#1989fa
direction v2.0.1菜单展开方向，可选值为upstringdown
z-index菜单栏 z-index 层级number | string10
duration动画时长，单位秒number | string0.2
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside v2.0.7是否在点击外部元素后关闭菜单booleantrue
DropdownItem Props参数说明类型默认值value当前选中项对应的 value，可以通过v-model双向绑定number | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
get-container v2.2.4指定挂载的节点，用法示例string | () => Element-
DropdownItem Events事件名说明回调参数change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
opened打开菜单栏且动画结束后触发-
close关闭菜单栏时触发-
opened关闭菜单栏且动画结束后触发-
DropdownItem Slots名称说明default菜单内容
title自定义标题，不支持动态渲染
DropdownItem 方法
通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见 组件实例方法方法名说明参数返回值toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-
Option 数据结构键名说明类型text文字string
value标识符number | string
icon左侧 图标名称 或图片链接string