Vant DropdownMenu 下拉菜单

Vant DropdownMenu 下拉菜单主要用于一些分类栏目较多的地方进行制作下拉菜单。

引入import Vue from 'vue';

import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu);

Vue.use(DropdownItem);

基础用法

export default {

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方法手动控制菜单的显示

确认

export default {

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

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

效果演示