Vant DropdownMenu 下拉菜单
Vant DropdownMenu 下拉菜单主要用于一些分类栏目较多的地方进行制作下拉菜单。
引入importVuefrom'vue';
import{DropdownMenu,DropdownItem}from'vant';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
基础用法
exportdefault{
data(){
return{
value1:0,
value2:'a',
option1:[
{text:'全部商品',value:0},
{text:'新款商品',value:1},
{text:'活动商品',value:2}
],
option2:[
{text:'默认排序',value:'a'},
{text:'好评排序',value:'b'},
{text:'销量排序',value:'c'},
]
}
}
};
自定义菜单内容
通过插槽可以自定义DropdownItem的内容，此时需要使用实例上的toggle方法手动控制菜单的显示
确认
exportdefault{
data(){
return{
value:0,
switch1:false,
switch2:false,
option:[
{text:'全部商品',value:0},
{text:'新款商品',value:1},
{text:'活动商品',value:2}
]
}
},
methods:{
onConfirm(){
this.$refs.item.toggle();
}
}
};
自定义选中态颜色
通过active-color属性可以自定义菜单标题和选项的选中态颜色
向上展开
将direction属性值设置为up，菜单即可向上展开
禁用菜单
API
DropdownMenu Props参数说明类型默认值active-color菜单标题和选项的选中态颜色string#1989fa
directionv2.0.1菜单展开方向，可选值为upstringdown
z-index菜单栏 z-index 层级number | string10
duration动画时长，单位秒number | string0.2
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outsidev2.0.7是否在点击外部元素后关闭菜单booleantrue
DropdownItem Props参数说明类型默认值value当前选中项对应的 value，可以通过v-model双向绑定number | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
get-containerv2.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
效果演示
