Dropdown 下拉菜单

Dropdown 是一个可以显示临时弹出菜单的组件，用户可以从中选择一个选项。适用于菜单、操作集合等场景。

Storybook

引入

import { Dropdown, DropdownItem } from '@versakit/vue'

使用

loading

Dropdown API

属性

属性名	说明	类型	默认值
options	选项数据	DropdownOption[]	[]
trigger	触发方式	'click' | 'hover' | 'focus' | 'manual'	'click'
placement	下拉菜单位置	DropdownPlacement	'bottom-start'
disabled	是否禁用	boolean	false
visible	是否显示(仅在manual模式下生效)	boolean	-
maxWidth	最大宽度	string | number	-
minWidth	最小宽度	string | number	触发元素宽度
arrow	显示箭头	boolean	false
unstyled	是否使用无样式模式	boolean	false
pt	传递模板样式	DropdownPT	-

选项类型

interface DropdownOption {
	value: string | number | boolean | object
	label: string
	disabled?: boolean
	icon?: string
	divider?: boolean
	children?: DropdownOption[]
}

位置类型

type DropdownPlacement =
	| 'top'
	| 'top-start'
	| 'top-end'
	| 'bottom'
	| 'bottom-start'
	| 'bottom-end'
	| 'left'
	| 'left-start'
	| 'left-end'
	| 'right'
	| 'right-start'
	| 'right-end'

事件

事件名	说明	参数
update:visible	可见状态更新时触发	(visible: boolean)
select	选择选项时触发	(value: any)

插槽

名称	说明	参数
trigger	触发元素内容	-
default	下拉菜单内容	-

样式接口

type DropdownPT = {
	root?: string
	trigger?: string
	content?: string
	arrow?: string
	menu?: string
	menuItem?: string
	menuItemIcon?: string
	menuItemLabel?: string
	menuDivider?: string
}

DropdownItem API

属性

属性名	说明	类型	默认值
value	选项值	any	-
label	选项标签	string	-
disabled	是否禁用	boolean	false
icon	自定义图标	string	-
divider	是否分割线	boolean	false

事件

事件名	说明	参数
click	点击选项触发	(value: any)

插槽

名称	说明	参数
default	选项内容	-

组合使用示例

除了通过options属性配置选项外，也可以直接使用DropdownItem组件来构建下拉菜单：

<template>
	<Dropdown>
		<template #trigger>
			<button>下拉菜单</button>
		</template>
		<DropdownItem value="item1" label="选项一" />
		<DropdownItem value="item2" label="选项二" icon="📝" />
		<DropdownItem divider />
		<DropdownItem value="item3" disabled label="禁用选项" />
	</Dropdown>
</template>