Dropdown 下拉菜单

将动作或菜单折叠到下拉菜单中。

TIP

在 SSR 场景下，您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

基础用法

悬停在下拉菜单上以展开更多操作。

可使用按钮触发下拉菜单。

可以配置点击激活或者悬停激活。

可以通过 hide-on-click 属性来配置。

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

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

Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。

属性名	说明	类型	可选值	默认值
type	菜单按钮类型，同 `Button` 组件一样，仅在 `split-button` 为 true 的情况下有效。	string	—	—
size	菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效。	string	large / default / small	default
max-height	菜单最大高度	string / number	—	—
split-button	下拉触发元素呈现为按钮组	boolean	—	false
disabled	是否禁用	boolean	—	false
placement	菜单弹出位置	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom
trigger	触发下拉的行为	string	hover/click/contextmenu	hover
hide-on-click	是否在点击菜单项后隐藏菜单	boolean	—	true
show-timeout	展开下拉菜单的延时，仅在 trigger 为 hover 时有效	number	—	150
hide-timeout	收起下拉菜单的延时（仅在 trigger 为 hover 时有效）	number	—	150
role	下拉菜单的 ARIA 属性。根据具体场景，您可能想要将此更改为“navigation”	string	—	'menu'
tabindex	Dropdown 组件的 tabindex	number	—	0
popper-class	自定义浮层类名	string	—	—
popper-options	popper.js 参数	Object	请参考 popper.js 文档	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
teleported 2.2.20	是否将下拉列表插入至 body 元素	boolean	—	true

插槽名	说明	子标签
—	下拉菜单的内容。注意：必须是有效的 html DOM 元素（例如 `<span>、<button>` 等）或 `el-component`，以附加监听触发器	—
dropdown	下拉列表，通常是 `<el-dropdown-menu>` 组件	Dropdown-Menu

事件名	说明	参数
click	`split-button` 为 true 时，点击左侧按钮的回调	—
command	点击菜单项触发的事件回调	dropdown-item 的指令
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false

方法名	说明	参数
handleOpen	打开下拉菜单	—
handleClose	关闭下拉菜单	—

插槽名	说明	子标签
—	下拉菜单的内容	Dropdown-Item