DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

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

  1. import { createApp } from 'vue';
  2. import { DropdownMenu, DropdownItem } from 'vant';
  3. const app = createApp();
  4. app.use(DropdownMenu);
  5. app.use(DropdownItem);

代码演示

基础用法

  1. <van-dropdown-menu>
  2. <van-dropdown-item v-model="value1" :options="option1" />
  3. <van-dropdown-item v-model="value2" :options="option2" />
  4. </van-dropdown-menu>
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const value1 = ref(0);
  5. const value2 = ref('a');
  6. const option1 = [
  7. { text: '全部商品', value: 0 },
  8. { text: '新款商品', value: 1 },
  9. { text: '活动商品', value: 2 },
  10. ];
  11. const option2 = [
  12. { text: '默认排序', value: 'a' },
  13. { text: '好评排序', value: 'b' },
  14. { text: '销量排序', value: 'c' },
  15. ];
  16. return {
  17. value1,
  18. value2,
  19. option1,
  20. option2,
  21. };
  22. },
  23. };

自定义菜单内容

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

  1. <van-dropdown-menu>
  2. <van-dropdown-item v-model="value" :options="options" />
  3. <van-dropdown-item title="筛选" ref="item">
  4. <van-cell center title="包邮">
  5. <template #right-icon>
  6. <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
  7. </template>
  8. </van-cell>
  9. <van-cell center title="团购">
  10. <template #right-icon>
  11. <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
  12. </template>
  13. </van-cell>
  14. <div style="padding: 5px 16px;">
  15. <van-button type="danger" block round @click="onConfirm">
  16. 确认
  17. </van-button>
  18. </div>
  19. </van-dropdown-item>
  20. </van-dropdown-menu>
  1. import { ref } from 'vue';
  2. export default {
  3. setup() {
  4. const item = ref(null);
  5. const value = ref(0);
  6. const switch1 = ref(false);
  7. const switch2 = ref(false);
  8. const options = [
  9. { text: '全部商品', value: 0 },
  10. { text: '新款商品', value: 1 },
  11. { text: '活动商品', value: 2 },
  12. ];
  13. const onConfirm = () => {
  14. item.value.toggle();
  15. };
  16. return {
  17. item,
  18. value,
  19. switch1,
  20. switch2,
  21. options,
  22. onConfirm,
  23. };
  24. },
  25. };

自定义选中态颜色

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

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

向上展开

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

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

禁用菜单

  1. <van-dropdown-menu>
  2. <van-dropdown-item v-model="value1" disabled :options="option1" />
  3. <van-dropdown-item v-model="value2" disabled :options="option2" />
  4. </van-dropdown-menu>

API

DropdownMenu Props

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
direction菜单展开方向,可选值为upstringdown
z-index菜单栏 z-index 层级number | string10
duration动画时长,单位秒,设置为 0 可以禁用动画number | string0.2
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部元素后关闭菜单booleantrue

DropdownItem Props

参数说明类型默认值
v-model当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
lazy-render是否在首次展开时才渲染菜单内容booleantrue
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-

类型定义

组件导出以下类型定义:

  1. import type {
  2. DropdownMenuProps,
  3. DropdownItemProps,
  4. DropdownItemOption,
  5. DropdownItemInstance,
  6. DropdownMenuDirection,
  7. } from 'vant';

DropdownItemInstance 是组件实例的类型,用法如下:

  1. import { ref } from 'vue';
  2. import type { DropdownItemInstance } from 'vant';
  3. const dropdownItemRef = ref<DropdownItemInstance>();
  4. dropdownItemRef.value?.toggle();

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接,等同于 Icon 组件的 name 属性string

主题定制

样式变量

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

名称默认值描述
—van-dropdown-menu-height48px-
—van-dropdown-menu-background-colorvar(—van-background-color-light)-
—van-dropdown-menu-box-shadow0 2px 12px fade(var(—van-gray-7), 12)-
—van-dropdown-menu-title-font-size15px-
—van-dropdown-menu-title-text-colorvar(—van-text-color)-
—van-dropdown-menu-title-active-text-colorvar(—van-danger-color)-
—van-dropdown-menu-title-disabled-text-colorvar(—van-text-color-2)-
—van-dropdown-menu-title-padding0 var(—van-padding-xs)-
—van-dropdown-menu-title-line-heightvar(—van-line-height-lg)-
—van-dropdown-menu-option-active-colorvar(—van-danger-color)-
—van-dropdown-menu-content-max-height80%-
—van-dropdown-item-z-index10-

常见问题

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

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

DropdownItemteleport 属性设置为 body 即可避免此问题:

  1. <van-dropdown-menu>
  2. <van-dropdown-item teleport="body" />
  3. <van-dropdown-item teleport="body" />
  4. </van-dropdown-menu>

DropdownMenu 下拉菜单 - 图1