Skip to content

Dropdown 下拉菜单

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

引入

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

使用

loading

属性

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

选项类型

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

位置类型

typescript
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下拉菜单内容-

样式接口

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

属性

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

事件

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

插槽

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

组合使用示例

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

vue
<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>