Vant3 中文入门教程 Vant3 DropdownMenu 下拉菜单

2024-02-25 开发教程 Vant3 中文入门教程 匿名 6

介绍

向下弹出的菜单列表。

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
const app = createApp();
app.use(DropdownMenu);
app.use(DropdownItem);

代码演示

基础用法

<van-dropdown-menu>
<van-dropdown-item v-model="state.value1" :options="option1" />
<van-dropdown-item v-model="state.value2" :options="option2" />
</van-dropdown-menu>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
value1: 0,
value2: 'a',
});
const option1 = [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 },
];
const option2 = [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' },
];
return {
state,
option1,
option2,
};
},
};

自定义菜单内容

通过插槽可以自定义 DropdownItem 的内容,此时需要使用实例上的 toggle 方法手动控制菜单的显示。

<van-dropdown-menu>
<van-dropdown-item v-model="value" :options="option" />
<van-dropdown-item title="筛选" ref="item">
<van-cell center title="包邮">
<template #right-icon>
<van-switch v-model="switch1" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<van-cell center title="团购">
<template #right-icon>
<van-switch v-model="switch2" size="24" active-color="#ee0a24" />
</template>
</van-cell>
<div style="padding: 5px 16px;">
<van-button type="danger" block round @click="onConfirm">
确认
</van-button>
</div>
</van-dropdown-item>
</van-dropdown-menu>
import { ref, reactive } from 'vue';
export default {
setup() {
const item = ref(null);
const state = reactive({
value: 0,
switch1: false,
switch2: false,
});
const options = [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 },
];
const onConfirm = () => {
item.value.toggle();
};
return {
item,
state,
options,
onConfirm,
};
},
};

自定义选中态颜色

通过 active-color 属性可以自定义菜单标题和选项的选中态颜色。

<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

向上展开

将 direction 属性值设置为 up,菜单即可向上展开。

<van-dropdown-menu direction="up">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

禁用菜单

<van-dropdown-menu>
<van-dropdown-item v-model="value1" disabled :options="option1" />
<van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>

API

DropdownMenu Props

参数说明类型默认值
active-color菜单标题和选项的选中态颜色

string

#ee0a24

direction

菜单展开方向,可选值为up

string

down

z-index菜单栏 z-index 层级

number | string

10

duration动画时长,单位秒,设置为 0 可以禁用动画

number | string

0.2

overlay是否显示遮罩层

boolean

true

close-on-click-overlay是否在点击遮罩层后关闭菜单

boolean

true

close-on-click-outside是否在点击外部元素后关闭菜单

boolean

true

DropdownItem Props

参数说明类型默认值
v-model当前选中项对应的 value

number | string

-
title菜单项标题

string

当前选中项文字
options选项数组

Option[]

[]

disabled是否禁用菜单

boolean

false

lazy-render是否在首次展开时才渲染菜单内容

boolean

true

title-class标题额外类名

string | Array | object

-
teleport

指定挂载的节点,等同于 Teleport 组件的 to 属性

string | Element

-

DropdownItem Events

事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

DropdownItem Slots

名称说明
default菜单内容
title自定义菜单项标题

DropdownItem 方法

通过 ref 可以获取到 DropdownItem 实例并调用实例方法,详见组件实例方法。

方法名说明参数返回值
toggle切换菜单展示状态,传 true为显示,false为隐藏,不传参为取反

show?: boolean

-

Option 数据结构

键名说明类型
text文字

string

value标识符

number | string

icon左侧图标名称或图片链接

string

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-dropdown-menu-height

48px

-
--van-dropdown-menu-background-color

var(--van-white)

-
--van-dropdown-menu-box-shadow

0 2px 12px fade(var(--van-gray-7), 12)

-
--van-dropdown-menu-title-font-size

15px

-
--van-dropdown-menu-title-text-color

var(--van-text-color)

-
--van-dropdown-menu-title-active-text-color

var(--van-danger-color)

-
--van-dropdown-menu-title-disabled-text-color

var(--van-gray-6)

-
--van-dropdown-menu-title-padding

0 var(--van-padding-xs)

-
--van-dropdown-menu-title-line-height

var(--van-line-height-lg)

-
--van-dropdown-menu-option-active-color

var(--van-danger-color)

-
--van-dropdown-menu-content-max-height

80%

-
--van-dropdown-item-z-index

10

-

常见问题

父元素设置 transform 后,下拉菜单的位置错误?

把 DropdownMenu 嵌套在 Tabs 等组件内部使用时,可能会遇到下拉菜单位置错误的问题。这是因为在 Chrome 浏览器中,transform 元素内部的 fixed 布局会降级成 absolute 布局,导致下拉菜单的布局异常。

将 DropdownItem 的 teleport 属性设置为 body 即可避免此问题:

<van-dropdown-menu>
<van-dropdown-item teleport="body" />
<van-dropdown-item teleport="body" />
</van-dropdown-menu>