下拉菜单 DropDown

通过下拉框展示的小型菜单。

基础使用

通过 options 属性设置菜单内容。选项中字符串值或者对象值的 index 字段会作为选项唯一标识，建议确保它们没有重复。

通过 select 事件获取触发的选项。

options 根据子元素的 href 或 route 字段决定把选项渲染 <a> 标签或者 Vue Router 的 RouterLink 组件。

WARNING

href 和 route 将直接渲染到 <a> 标签中，如果传递类似 javascript:alert(1) 这样的值或恶意 URL，可能会导致 XSS 或开放重定向漏洞。

隐藏源代码

弹出位置

DropDown 弹出框提供 9 种展示位置。

由 placement 属性决定弹出的位置。该属性值格式为：[方向]-[对齐位置]，分别是'top'、'right'、'bottom'、'left'、'top-start'、'top-end'、'right-start'、'right-end'、'bottom-start'、'bottom-end'、'left-start'、'left-end'，有四个展示方向，和三种对齐方式，默认的 placement 为 top。

隐藏源代码

菜单分组

选项是可以分组的。

隐藏源代码

分割按钮

结合 ButtonGroup 和 Button 组件，这里可以使得图标按钮触发弹出。

隐藏源代码

受控模式

传入 visible 属性进入受控模式；不传或传 undefined 则为非受控模式，可使用 defaultVisible 指定初始显示。组件会触发 update:visible 事件以配合 v-model。

隐藏源代码

禁用状态

传入 disabled 设置禁用状态，此时触发方式将失效，弹出层不会被打开。

隐藏源代码

插槽用法

Dropdown 提供 option 和 group-label 插槽，用于自定义选项和分组标题的渲染内容。

隐藏源代码

API

DropDownProps

属性	类型	可选	默认值	描述	版本
options	DropDownOption | DropDownGroupOption	是		下拉菜单内容。	0.1.0
visible	boolean | null	是		是否显示（受控模式，支持 v-model）。	0.1.0
defaultVisible	boolean | null	是		非受控模式下默认的显示状态。	0.1.0
placement	'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'	是	'top'	弹出位置。	0.1.0
trigger	'hover' | 'click'	是	'hover'	触发方式。	0.1.0
disabled	boolean	是	boolean	是否禁用。	0.1.0
offset	number	是	8	弹出偏移距离（px）。	0.1.0
variant	'dark' | 'light'	是	'light'	组件样式变体。	0.1.0
arrow	boolean	是	true	是否展示箭头。	0.1.0
root	HTMLElement | string	是	'body'	挂载元素。	0.1.0
zIndex	number	是		弹出层 z-index。	0.1.0
animationDuration	number	是	250	弹出 / 收起动画时长。	0.1.5
destroyOnHide	boolean	是	false	隐藏时是否销毁内容。	0.1.0
popoverProps	Omit<PopoverProps, 'visible' | 'content' | 'defaultVisible'> & EmitEvent<PopoverEvents>	是		透传给内部 Popover 的属性。	0.1.0
dividerProps	RestAttrs	是		透传 DOM 属性到分割线元素。	0.1.0

DropDownEvents

事件	参数	描述	版本
update:visible	value: boolean	更新 visible 的回调。	0.1.0
close	event: MouseEvent	弹出层关闭时触发。	0.1.0
open	event: MouseEvent	弹出层打开时触发。	0.1.0
select	index: string | number | symbol, option: DropDownOption | string, event: MouseEvent	选择菜单时触发的回调。	0.1.0

DropDownSlots

插槽	参数	描述	版本
default		触发元素插槽。	0.1.0
option	item: string | DropDownOption	选项自定义渲染。	0.1.5
group-label	item: DropDownGroupOption		0.1.5

DropDownExpose

属性	类型	可选	默认值	描述	版本
open	() => void	否		打开确认弹出框。	0.1.0
close	() => void	否		关闭确认弹出框。	0.1.0

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

DropDownOption, DropDownGroupOption

export interface DropDownOption extends NavigationOption {
	divider?: boolean
	disabled?: boolean
	href?: string
	route?: string | object
	target?: string
}

export interface DropDownGroupOption extends NavigationOption {
	children: (DropDownOption | string)[]
	type: 'group'
}

export interface NavigationOption {
	index: string | number | symbol
	label?: string
}