Dropdown 下拉菜单

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

基础用法

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

通过组件 slot 来设置下拉触发的元素以及需要通过具名 slot 为 dropdown 来设置下拉菜单。默认情况下，只需要悬停在触发菜单的元素上即可，无需点击也会显示下拉菜单。

位置

支持 6 个位置。

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

vue

<template>
  <div class="flex flex-wrap items-center gap-4">
    <el-dropdown placement="top-start">
      <el-button> topStart </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="top">
      <el-button> top </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="top-end">
      <el-button> topEnd </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="bottom-start">
      <el-button> bottomStart </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="bottom">
      <el-button> bottom </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="bottom-end">
      <el-button> bottomEnd </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

触发对象

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

设置 split-button 属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为 true 即可。如果你想要在第三和第四个选项之间添加一个分隔符，你只需要为第四个选项添加一个 divider 的 CSS class。

触发方式

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

将 trigger 属性设置为 click 即可，默认为 hover。

hover to trigger

click to trigger

right click to trigger

vue

<template>
  <el-row class="block-col-2">
    <el-col :span="8">
      <span class="demonstration">hover to trigger</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="8">
      <span class="demonstration">click to trigger</span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="8">
      <span class="demonstration">right click to trigger</span>
      <el-dropdown trigger="contextmenu">
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.block-col-2 .el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>

菜单隐藏方式

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

下拉菜单默认在点击菜单项后会被隐藏，将 hide-on-click 属性设置为 false 可以关闭此功能。

指令事件

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

下拉方法

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

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

尺寸

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

使用 size 属性配置尺寸，可选的尺寸大小有: large, default 或 small

属性名	说明	类型	Default
type	菜单按钮类型，同 `Button` 组件一样，仅在 `split-button` 为 true 的情况下有效。	`enum`	''
size	菜单尺寸，在 split-button 为 true 的情况下也对触发按钮生效。	`enum`	''
max-height	菜单最大高度	`string` / `number`	''
split-button	下拉触发元素呈现为按钮组	`boolean`	false
disabled	是否禁用	`boolean`	false
placement	菜单弹出位置	`enum`	bottom
trigger	触发下拉的行为	`enum`	hover
triggerKeys 2.9.1	指定键盘上哪些按键可以触发操作	`array`	`['Enter', 'Space', 'ArrowDown', 'NumpadEnter']`
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` / `string`	0
popper-class	自定义浮层类名	`string`	''
popper-options	popper.js 参数	`object`	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
teleported 2.2.20	是否将下拉列表插入至 body 元素	`boolean`	true

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

事件名	说明	类型
click	`split-button` 为 true 时，点击左侧按钮的回调	`Function`
command	当下拉项被点击时触发，参数是从下拉菜单中发送的命令	`Function`
visible-change	当下拉菜单出现/消失时触发器, 当它出现时, 参数将是 `true`, 否则将是 `false`	`Function`

方法名	说明	Type
handleOpen	打开下拉菜单	`Function`
handleClose	关闭下拉菜单	`Function`

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

属性名	说明	Type	默认值
command	派发到`command`回调函数的指令参数	`string` / `number` / `object`	—
disabled	是否禁用	`boolean`	false
divided	是否显示分隔符	`boolean`	false
icon	自定义图标	`string` / `Component`	—