下拉菜单 ​

用于显示链接和操作列表的可切换菜单。

基本用法 ​

将鼠标悬停在下拉菜单上可将其展开以执行更多操作。

触发元素由默认的slot渲染,下拉部分由名为dropdown的slot渲染。默认情况下,当您将鼠标悬停在触发元素上而无需单击它时,会显示下拉列表。

安置 ​

支持6个展示位置。

设置 placement 属性以使下拉菜单出现在不同的位置。

触发元素 ​

使用按钮触发下拉列表。

使用split-button 将触发元素拆分为按钮组,左按钮为普通按钮,右按钮为实际触发目标。如果您想在第 3 项和第 4 项之间插入分隔线,只需将 divided 属性添加到第 4 项即可。

如何触发 ​

单击触发元素或将鼠标悬停在其上。

使用属性 trigger。默认为hover。

hover to trigger
click to trigger
right click to trigger

菜单隐藏行为 ​

使用 hide-on-click 定义单击时菜单是否关闭。

默认情况下,单击菜单项时菜单将关闭,可以通过将 hide-on-click 设置为 false 来关闭它。

命令事件 ​

单击每个下拉项会触发一个事件,其参数由每个项分配。

下拉方法 ​

您可以通过手动使用 handleOpen 或 handleClose 打开或关闭下拉菜单

open(close) the Dropdown list2 will close(open) the Dropdown List1.

尺寸 ​

除了默认大小外,Dropdown 组件还提供了三种附加大小供您在不同场景中进行选择。

使用属性 size 通过 large、default 或 small 设置附加尺寸。

虚拟触发2.11.3 ​

有时我们想在其他触发元素上渲染下拉菜单,我们可以将触发器和内容分开。

Right click

下拉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 属性