vant下拉框样式_VantDropdownMenu下拉菜单Vant DropdownMenu 下拉菜单
Vant DropdownMenu 下拉菜单主要⽤于⼀些分类栏⽬较多的地⽅进⾏制作下拉菜单。
引⼊import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
基础⽤法
html下拉菜单的制作方法
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.$le();
}
}
};
⾃定义选中态颜⾊
通过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
效果演⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。