下拉菜单
用于显示链接和操作列表的可切换菜单。
基本用法
将鼠标悬停在下拉菜单上可将其展开以执行更多操作。
触发元素由默认的slot渲染,下拉部分由名为dropdown的slot渲染。默认情况下,当您将鼠标悬停在触发元素上而无需单击它时,会显示下拉列表。
安置
支持6个展示位置。
设置 placement 属性以使下拉菜单出现在不同的位置。
触发元素
使用按钮触发下拉列表。
使用split-button 将触发元素拆分为按钮组,左按钮为普通按钮,右按钮为实际触发目标。如果您想在第 3 项和第 4 项之间插入分隔线,只需将 divided 属性添加到第 4 项即可。
如何触发
单击触发元素或将鼠标悬停在其上。
使用属性 trigger。默认为hover。
菜单隐藏行为
使用 hide-on-click 定义单击时菜单是否关闭。
默认情况下,单击菜单项时菜单将关闭,可以通过将 hide-on-click 设置为 false 来关闭它。
命令事件
单击每个下拉项会触发一个事件,其参数由每个项分配。
下拉方法
您可以通过手动使用 handleOpen 或 handleClose 打开或关闭下拉菜单
尺寸
除了默认大小外,Dropdown 组件还提供了三种附加大小供您在不同场景中进行选择。
使用属性 size 通过 large、default 或 small 设置附加尺寸。
虚拟触发2.11.3
有时我们想在其他触发元素上渲染下拉菜单,我们可以将触发器和内容分开。
下拉API
下拉属性
| 名称 | 描述 | 类型 | 默认 | | ------------------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | --- | | 类型 | 菜单按钮类型,参考Button组件,仅当split-button为true时有效 | 枚举 | '' | | 尺寸 | 菜单大小,也适用于拆分按钮 | 枚举 | '' | | 按钮道具 | 按钮组件的props,参考按钮属性 | 对象 | — | | 最大高度 | 菜单的最大高度 | 字符串 / 数字 | '' | | 分割按钮 | 是否显示按钮组 | 布尔值 | 假 | | 已禁用 | 是否禁用 | 布尔值 | 假 | | 安置 | 弹出菜单的放置 | 枚举 | 底部 | | 效果 | 工具提示主题,内置主题:dark / light | 枚举 / 字符串 | 光 | | 触发 | 如何触发 | 枚举 / 数组 | 悬停 | | 触发键 2.9.1 | 指定按下键盘上的哪些键可以触发 | 数组 | ['Enter', 'Space', 'ArrowDown', 'NumpadEnter'] | | 虚拟触发 2.11.3 | 是否启用虚拟触发 | 布尔值 | — | | 虚拟引用 2.11.3 | 指示下拉列表附加到的参考元素 | HTMLElement | — | | 点击隐藏 | 单击菜单项后是否隐藏菜单 | 布尔值 | 真实 | | 显示箭头 2.11.3 | 工具提示内容是否有箭头 | 布尔值 | 真实 | | 显示超时 | 显示下拉列表之前的延迟时间(仅当触发器为 hover 时有效) | 数字 | 150 | 150 | | 隐藏超时 | 隐藏下拉菜单之前的延迟时间(仅当触发器为 hover 时有效) | 数字 | 150 | 150 | | 角色 | 下拉菜单的 ARIA 角色属性。根据用例,您可能希望将其更改为“导航” | 枚举 | 菜单 | | 标签索引 | 下拉菜单的tabindex | 数字 / 字符串 | 0 | | 波普尔级 | Dropdown 下拉菜单的自定义类名 | 字符串 / 对象 | '' | | 波普风格 2.11.5 | Dropdown下拉菜单的自定义样式 | 字符串 / 对象 | — | | popper 选项 | popper.js 参数 | 对象 | {modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]} | | 传送 2.2.20 | 下拉弹出窗口是否传送到主体 | 布尔值 | 真实 | | 追加到 2.13.0 | 下拉列表 CONTENT 附加到哪个元素 | CSS选择器 / HTMLElement | — | | 持久 2.9.5 | 当下拉菜单处于非活动状态且 persistent 为 false 时,下拉菜单将被销毁 | 布尔值 | 真实 |
下拉槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| 默认 | 下拉菜单的内容。注意:必须是有效的 html dom 元素(例如 <span>, <button> etc.)或 el-component,才能附加触发侦听器 | — |
| 下拉菜单 | 下拉菜单的内容,通常是 <el-dropdown-menu> 元素 | 下拉菜单 |
下拉事件
| 名称 | 描述 | 类型 |
|---|---|---|
| 点击 | 如果split-button是true,则点击左键时触发 | 功能 |
| 命令 | 单击下拉项时触发,参数是从下拉项派发的命令 | 功能 |
| 可见变化 | 当下拉出现/消失时触发,出现时参数为 true,否则为 false | 功能 |
下拉菜单暴露
| 方法 | 描述 | 类型 |
|---|---|---|
| 处理打开 | 打开下拉菜单 | 功能 |
| 处理关闭 | 关闭下拉菜单 | 功能 |
下拉菜单 API
下拉菜单槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| 默认 | 下拉菜单的内容 | 下拉项目 |
下拉项 API
下拉菜单项属性
| 名称 | 描述 | 类型 | 默认 |
|---|---|---|---|
| 命令 | 发送到 Dropdown 的 command 回调的命令 | 字符串 / 数字 / 对象 | — |
| 已禁用 | 该项是否被禁用 | 布尔值 | 假 |
| 分割 | 是否显示分隔线 | 布尔值 | 假 |
| 图标 | 自定义图标 | 字符串 / 组件 | — |
下拉项目槽
| 名称 | 描述 |
|---|---|
| 默认 | 自定义下拉菜单 |
| 图标 2.13.1 | 自定义图标,它将覆盖 icon 属性 |