Dropdown 下拉菜单

介绍

向下、向上弹出的菜单列表，常用于列表数据筛选。

基础用法

通过 v-model绑定选中的值，通过 options 配置下拉列表的选项。

<vd-dropdown>
  <vd-dropdown-item v-model="sort.value" :options="sort.options" />
  <vd-dropdown-item v-model="sortType.value" :options="sortType.options" />
</vd-dropdown>

const sort = reactive({
  value: '',
  options: [
    { label: '综合排序', value: '1' },
    { label: '信用排序', value: '2' },
    { label: '距离排序', value: '3' },
  ],
});

const sortType = reactive({
  value: '',
  options: [
    { label: '从高到低', value: '1' },
    { label: '从低到高', value: '2' },
  ],
});

自定义菜单内容

通过默认插槽可自定义菜单内容。

<vd-dropdown>
  <vd-dropdown-item v-model="sort.value" :options="sort.options" />
  <vd-dropdown-item title="其他筛选">
    <vd-cell-group :center="true">
      <vd-cell title="包邮"><vd-switch v-model="chose.a" :size="22" /></vd-cell>
      <vd-cell title="省内"><vd-switch v-model="chose.b" :size="22" /></vd-cell>
      <vd-cell title="七天无理由"><vd-switch v-model="chose.c" :size="22" /></vd-cell>
    </vd-cell-group>
  </vd-dropdown-item>
</vd-dropdown>

const sort = reactive({
  value: '',
  options: [
    { label: '综合排序', value: '1' },
    { label: '信用排序', value: '2' },
    { label: '距离排序', value: '3' },
  ],
});

const chose = reactive({
  a: false,
  b: false,
  c: false,
});

自定义导航图标

通过 arrow 插槽可自定义导航图标。

<vd-dropdown>
  <vd-dropdown-item v-model="sort.value" :options="sort.options" />
  <vd-dropdown-item v-model="sortType.value" :options="sortType.options" />

  <template #arrow="{ index }">
    <vd-icon v-if="index === 0" name="arrow-bottom" />
    <vd-icon v-else-if="index === 1" name="arrow-bottom-double" />
  </template>
</vd-dropdown>

const sort = reactive({
  value: '',
  options: [...],
});

const sortType = reactive({
  value: '',
  options: [...],
});

弹出方向

通过 direction 属性设置弹出方向。

<vd-dropdown direction="up">
  <vd-dropdown-item v-model="sort.value" :options="sort.options" />
  <vd-dropdown-item v-model="sortType.value" :options="sortType.options" />
</vd-dropdown>

const sort = reactive({
  value: '',
  options: [...],
});

const sortType = reactive({
  value: '',
  options: [...],
});

禁用状态

通过 disabled 属性禁用下拉菜单。

<vd-dropdown>
  <vd-dropdown-item v-model="sort.value" :options="sort.options" disabled />
  <vd-dropdown-item v-model="sortType.value" :options="sortType.options" disabled />
</vd-dropdown>

const sort = reactive({
  value: '',
  options: [...],
});

const sortType = reactive({
  value: '',
  options: [...],
});

API

Dropdown Props

参数	说明	类型	默认值
direction	菜单展开方向	'up' | 'down'	'down'
duration	动画时长	string | number	300
overlay	是否展示遮罩层	boolean	true
overlay-class	遮罩类名	ClassValue	-
overlay-style	遮罩样式	StyleValue	-
close-on-click-overlay	是否点击遮罩关闭	boolean	true
close-on-click-outside	点击元素外部后关闭	boolean	true
z-index	层级	number	2001+

DropdownItem Props

参数	说明	类型	默认值
v-model	当前选中值	string | number	-
options	选项组	SelectOption[]	[]
title	自定义标题，默认展示选中项的标签	string	-
placeholder	占位符	string	-
loading	是否加载中	boolean	false
loading-type	加载中类型	LoadingType	'spinner'
disabled	是否禁用	boolean	false
index	索引，小程序下需要在循环时设置该值	string | number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Dropdown Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-overlay	点击遮罩触发	MouseEvent
click-outside	点击外部触发	MouseEvent

DropdownItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
update:model-value	选中值更新时触发	string | number
click-option	点击选项时触发	SelectOption
change	改变时触发	SelectOption
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Dropdown Slots

名称	说明
navs	导航区域
nav	导航项
title	标题
arrow	箭头图标
default	下拉菜单内容

DropdownItem Slots

名称	说明
default	下拉菜单内容
option	选项内容
label	选项标签
empty	空状态
loading	加载中

DropdownItem Expose

方法名 / 属性名	说明	参数	返回值
show	是否展示过渡中	-	Ref<boolean>
opened	是否已展开	-	Ref<boolean>
open	展开下拉菜单	-	Promise<void>
close	关闭下拉菜单	-	-

类型定义

组件导出以下类型定义：

import type {
  DropdownItemExpose,
  DropdownItemInstance,
} from 'vital-design';