Dropdown 下拉菜单
点击或悬停后弹出的菜单。
基本使用
items 提供菜单项,触发器写在默认插槽里。
触发方式
通过 trigger 切换触发方式:hover(默认)/ click / contextmenu(右键)。
禁用项与危险项
disabled 让单项不可点;danger 让单项使用错误色突出(常用于"删除");divided 在该项上方加分隔线。
监听选择
select 事件返回被选中的菜单项对象。
弹出方位
placement 与 Popover 一致,支持 12 个方位。
受控显示
通过 v-model:visible 自己控制开合,便于联动外部逻辑。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| items | DropdownItem[] | [] | 菜单项列表 |
| trigger | 'hover' | 'click' | 'contextmenu' | 'hover' | 触发方式 |
| placement | PopoverPlacement | 'bottom-start' | 弹出方位(与 Popover 一致) |
| disabled | boolean | false | 禁用整个下拉 |
| visible | boolean | undefined | 受控显示状态,支持 v-model:visible |
| hideOnClick | boolean | true | 点击菜单项后是否自动收起 |
| width | number | string | '' | 弹层最小宽度 |
DropdownItem
| 字段 | 类型 | 说明 |
|---|---|---|
| key | string | number | 唯一标识 |
| label | string | 显示文本 |
| icon | string | 图标 class(可选) |
| disabled | boolean | 是否禁用 |
| divided | boolean | 在该项上方加分隔线 |
| danger | boolean | 危险项样式(红色文本,hover 红底白字) |
Events
| 事件名 | 回调签名 | 触发时机 |
|---|---|---|
| select | (item: DropdownItem) | 点击某一项时触发 |
| update:visible | (visible: boolean) | 弹层显示状态变化 |
| visible-change | (visible: boolean) | 同 update:visible |
Slots
| 名称 | 说明 |
|---|---|
| default | 触发器 |
| menu | 自定义菜单内容(不使用 items),slot 参数 { select } 用于主动收起菜单 |