Skip to content

Dropdown 下拉菜单

点击或悬停后弹出的菜单。

基本使用

items 提供菜单项,触发器写在默认插槽里。

触发方式

通过 trigger 切换触发方式:hover(默认)/ click / contextmenu(右键)。

禁用项与危险项

disabled 让单项不可点;danger 让单项使用错误色突出(常用于"删除");divided 在该项上方加分隔线。

监听选择

select 事件返回被选中的菜单项对象。

弹出方位

placement 与 Popover 一致,支持 12 个方位。

受控显示

通过 v-model:visible 自己控制开合,便于联动外部逻辑。

API

Props

参数类型默认值说明
itemsDropdownItem[][]菜单项列表
trigger'hover' | 'click' | 'contextmenu''hover'触发方式
placementPopoverPlacement'bottom-start'弹出方位(与 Popover 一致)
disabledbooleanfalse禁用整个下拉
visiblebooleanundefined受控显示状态,支持 v-model:visible
hideOnClickbooleantrue点击菜单项后是否自动收起
widthnumber | string''弹层最小宽度
字段类型说明
keystring | number唯一标识
labelstring显示文本
iconstring图标 class(可选)
disabledboolean是否禁用
dividedboolean在该项上方加分隔线
dangerboolean危险项样式(红色文本,hover 红底白字)

Events

事件名回调签名触发时机
select(item: DropdownItem)点击某一项时触发
update:visible(visible: boolean)弹层显示状态变化
visible-change(visible: boolean)update:visible

Slots

名称说明
default触发器
menu自定义菜单内容(不使用 items),slot 参数 { select } 用于主动收起菜单

Released under the MIT License.