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

自定义菜单内容

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

  1. <van-dropdown-menu>
  2. <van-dropdown-item v-model="value" :options="option" />
  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, reactive } from 'vue';
  2. export default {
  3. setup() {
  4. const item = ref(null);
  5. const state = reactive({
  6. value: 0,
  7. switch1: false,
  8. switch2: false,
  9. });
  10. const options = [
  11. { text: '全部商品', value: 0 },
  12. { text: '新款商品', value: 1 },
  13. { text: '活动商品', value: 2 },
  14. ];
  15. const onConfirm = () => {
  16. item.value.toggle();
  17. };
  18. return {
  19. item,
  20. state,
  21. option,
  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动画时长,单位秒number | string0.2
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部元素后关闭菜单booleantrue

DropdownItem Props

参数说明类型默认值
value当前选中项对应的 value,可以通过v-model双向绑定number | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
lazy-render v2.8.5是否在首次展开时才渲染菜单内容booleantrue
title-class标题额外类名string-
teleport指定挂载的节点,用法示例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

样式变量

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

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

DropdownMenu 下拉菜单 - 图1