下拉菜单

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

基本用法

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

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

安置

支持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 来关闭它。

命令事件

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

下拉方法

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

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

尺寸

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

使用属性 size 通过 largedefaultsmall 设置附加尺寸。

虚拟触发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 | 当下拉菜单处于非活动状态且 persistentfalse 时,下拉菜单将被销毁 | 布尔值 | 真实 |

下拉槽

名称描述子标签
默认下拉菜单的内容。注意:必须是有效的 html dom 元素(例如 <span>, <button> etc.)或 el-component,才能附加触发侦听器
下拉菜单下拉菜单的内容,通常是 <el-dropdown-menu> 元素下拉菜单

下拉事件

名称描述类型
点击如果split-buttontrue,则点击左键时触发功能
命令单击下拉项时触发,参数是从下拉项派发的命令功能
可见变化当下拉出现/消失时触发,出现时参数为 true,否则为 false功能

下拉菜单暴露

方法描述类型
处理打开打开下拉菜单功能
处理关闭关闭下拉菜单功能

下拉菜单 API

下拉菜单槽

名称描述子标签
默认下拉菜单的内容下拉项目

下拉项 API

下拉菜单项属性

名称描述类型默认
命令发送到 Dropdown 的 command 回调的命令字符串 / 数字 / 对象
已禁用该项是否被禁用布尔值
分割是否显示分隔线布尔值
图标自定义图标字符串 / 组件

下拉项目槽

名称描述
默认自定义下拉菜单
图标 2.13.1自定义图标,它将覆盖 icon 属性