下拉菜单 | Element Plus 组件库

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

基础用法

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

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

位置

支持 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 2nd</el-dropdown-item>
          <el-dropdown-item>The Action 3rd</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 2nd</el-dropdown-item>
          <el-dropdown-item>The Action 3rd</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 2nd</el-dropdown-item>
          <el-dropdown-item>The Action 3rd</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 2nd</el-dropdown-item>
          <el-dropdown-item>The Action 3rd</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 2nd</el-dropdown-item>
          <el-dropdown-item>The Action 3rd</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 2nd</el-dropdown-item>
          <el-dropdown-item>The Action 3rd</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

触发元素

使用按钮来触发下拉列表。

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

触发方式

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

使用 trigger 属性。默认情况下，它是 hover。

悬停触发

点击触发

右键单击以触发

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 来关闭该行为。

指令事件

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

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

打开(关闭)下拉列表 2 将关闭(打开)下拉列表 1。

尺寸

除了默认尺寸外，Dropdown 组件还提供了三种附加尺寸供您在不同场景中选择。

使用 size 属性来设置不同大小的文本，可选值为 large, default 或 small。

名称	描述	类型	默认值
type	菜单按钮类型，请参考 `Button` 组件，仅在 `split-button` 为 true 时有效	`枚举`	''
size	菜单大小，也适用于分割按钮	`枚举`	''
button-props	按钮组件的 props，请参考按钮属性	`object`	—
max-height	菜单的最大高度	`string` / `number`	''
split-button	是否显示按钮组	`boolean`	false
disabled	是否禁用	`boolean`	false
placement	弹出菜单的放置位置	`枚举`	bottom
trigger	如何触发	`枚举`	悬浮时
trigger-keys 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 role 属性。根据用例，您可能希望将其更改为 'navigation'	`枚举`	菜单
tabindex	Dropdown 的 tabindex	`number` / `string`	0
popper-class	Dropdown 下拉列表的自定义类名	`string`	''
popper-options	popper.js 参数	`object`	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
teleported 2.2.20	下拉弹出框是否被传送到 body	`boolean`	true
persistent 2.9.5	当下拉菜单不活动且 `persistent` 为 `false` 时，下拉菜单将被销毁	`boolean`	true

名称	描述	子标签
default	Dropdown 的内容。注意：必须是有效的 html dom 元素（例如 `<span>, <button> 等`）或 `el-component`，以附加触发侦听器	—
下拉	下拉菜单的内容，通常是 `<el-dropdown-menu>` 元素	下拉菜单

名称	描述	类型
click	如果 `split-button` 为 `true`，则在单击左侧按钮时触发	`Function`
指令	当下拉项被点击时触发，参数是下拉项分派的命令	`Function`
visible-change	当下拉菜单出现/消失时触发，出现时参数为 true，否则为 false	`Function`

方法	描述	类型
handleOpen	打开下拉菜单	`Function`
handleClose	关闭下拉菜单	`Function`

名称	描述	子标签
default	下拉菜单的内容	下拉项

名称	描述	类型	默认值
指令	一个要分派给 Dropdown 的 `command` 回调的命令	`string` / `number` / `object`	—
disabled	该项是否被禁用	`boolean`	false
分隔	是否显示分隔线	`boolean`	false
icon	自定义图标	`string` / `Component`	—