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
click-option	点击选项时触发	SelectOption
change	改变时触发	SelectOption
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-