Menu 菜单

为网站提供导航功能的菜单。

提示

如果你想覆盖 el-menu 的默认高度，可以使用以下 CSS

css

.el-menu--horizontal {
  --el-menu-horizontal-height: 100px;
}

顶栏

顶栏菜单可以用于多种场景。

默认情况下菜单是垂直的，但你可以通过将 mode 属性设置为 'horizontal' 来将其更改为水平。此外，你可以使用 sub-menu 组件创建二级菜单。Menu 提供了 background-color、text-color 和 active-text-color 来自定义颜色。

vue

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
  <div class="h-6" />
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

左侧和右侧

你可以使菜单项居左或居右。

带有子菜单的垂直菜单。

你可以使用 el-menu-item-group 组件来创建一个菜单组，组名由 title 属性或命名插槽决定。

默认颜色

自定义颜色

vue

<template>
  <el-row class="tac">
    <el-col :span="12">
      <h5 class="mb-2">Default colors</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="12">
      <h5 class="mb-2">Custom colors</h5>
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

Collapse 折叠面板

垂直菜单可以折叠。

展开收起

弹出层偏移 2.4.4

带有 popperOffset 的子菜单将覆盖菜单的 popper-offset。

名称	描述	类型	默认值
mode	菜单显示模式	`枚举`	vertical
收起	是否折叠收起菜单（仅在垂直模式下可用）	`boolean`	false
ellipsis	是否使用省略显示（仅在水平模式下可用）	`boolean`	true
ellipsis-icon 2.4.4	自定义省略图标（仅在水平模式且 ellipsis 为 true 时可用）	`string` / `Component`	—
popper-offset 2.4.4	弹出层的偏移量（对所有子菜单生效）	`number`	6
default-active	页面加载时默认激活的菜单的 index	`string`	''
default-openeds	当前打开的子菜单的 index 数组	`array`	[]
unique-opened	是否只保持一个子菜单的展开	`boolean`	false
menu-trigger	子菜单触发方式，仅在 `mode` 为 'horizontal' 时生效	`枚举`	悬浮时
router	是否启用 `vue-router` 模式。启用该模式会在激活导航时以 index 作为 path 进行路由跳转。使用 `default-active` 来设置加载时的激活项。	`boolean`	false
collapse-transition	是否启用折叠动画	`boolean`	true
popper-effect 2.2.26	当菜单折叠时，Tooltip 的主题，内置主题：`dark` / `light`	`enum` / `string`	暗黑模式
close-on-click-outside 2.4.4	可选，点击外部是否折叠菜单	`boolean`	false
popper-class 2.5.0	所有弹出菜单和标题 Tooltip 的自定义类名	`string`	—
popper-style 2.11.5	所有弹出菜单和标题 Tooltip 的自定义样式	`string` / `object`	—
show-timeout 2.5.0	控制所有菜单在显示前的超时时间	`number`	300
hide-timeout 2.5.0	控制所有菜单在隐藏前的超时时间	`number`	300
background-color deprecated	菜单的背景颜色（十六进制格式）（请改在样式类中使用 `--el-menu-bg-color`）	`string`	#ffffff
text-color deprecated	菜单的文本颜色（十六进制格式）（请改在样式类中使用 `--el-menu-text-color`）	`string`	#303133
active-text-color deprecated	当前激活菜单项的文本颜色（十六进制格式）（请改在样式类中使用 `--el-menu-active-color`）	`string`	#409eff
persistent 2.9.5	当菜单不活跃且 `persistent` 为 `false` 时，下拉菜单将被销毁	`boolean`	true

名称	描述	类型
select	菜单激活回调	`Function`
open	子菜单展开回调	`Function`
关闭	子菜单收起回调	`Function`

名称	描述	子标签
default	自定义默认内容	SubMenu / Menu-Item / Menu-Item-Group

名称	描述	类型
open	展开指定的子菜单，参数为该子菜单的 index	`Function`
关闭	收起指定的子菜单，参数为该子菜单的 index	`Function`
handleResize	手动触发菜单宽度重新计算	`Function`
updateActiveIndex 2.9.8	设置激活菜单的 index	`Function`

SubMenu API

SubMenu 属性

名称	描述	类型	默认值
index 必填	唯一标识	`string`	—
popper-class	弹出菜单的自定义类名	`string`	—
popper-style 2.11.5	弹出菜单的自定义样式	`string` / `object`	—
show-timeout	展开子菜单前的超时时间（默认继承菜单的 `show-timeout`）	`number`	—
hide-timeout	收起子菜单前的超时时间（默认继承菜单的 `hide-timeout`）	`number`	—
disabled	是否禁用子菜单	`boolean`	false
teleported	是否将弹出菜单 teleport 至 body。默认情况下，一级子菜单为 true，其他子菜单为 false	`boolean`	undefined
popper-offset	弹出层的偏移量（覆盖菜单的 `popper-offset`）	`number`	—
expand-close-icon	当菜单展开且子菜单关闭时的图标，`expand-close-icon` 和 `expand-open-icon` 需要同时传入才能生效	`string` / `Component`	—
expand-open-icon	当菜单展开且子菜单打开时的图标，`expand-open-icon` 和 `expand-close-icon` 需要同时传入才能生效	`string` / `Component`	—
collapse-close-icon	当菜单折叠且子菜单关闭时的图标，`collapse-close-icon` 和 `collapse-open-icon` 需要同时传入才能生效	`string` / `Component`	—
collapse-open-icon	当菜单折叠且子菜单打开时的图标，`collapse-open-icon` 和 `collapse-close-icon` 需要同时传入才能生效	`string` / `Component`	—

SubMenu 插槽

名称	描述	子标签
default	自定义默认内容	SubMenu / Menu-Item / Menu-Item-Group
title	自定义标题内容	—

名称	描述	类型	默认值
index 必填	唯一标识	`string`	—
route	Vue Router 路由位置参数	`string` / `object`	—
disabled	是否禁用	`boolean`	false

名称	描述	类型
click	点击菜单项时的回调，参数为该菜单项实例	`Function`

名称	描述
default	自定义默认内容
title	自定义标题内容

名称	描述	类型	默认值
title	分组标题	`string`	—

名称	描述	子标签
default	自定义默认内容	Menu-Item
title	自定义分组标题	—

类型声明

显示声明

/**
 * @param index index of activated menu
 * @param indexPath index path of activated menu
 * @param item the selected menu item
 * @param routerResult result returned by `vue-router` if `router` is enabled
 */
type MenuSelectEvent = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked,
  routerResult?: Promise<void | NavigationFailure>
) => void

/**
 * @param index index of expanded sub-menu
 * @param indexPath index path of expanded sub-menu
 */
type MenuOpenEvent = (index: string, indexPath: string[]) => void

/**
 * @param index index of collapsed sub-menu
 * @param indexPath index path of collapsed sub-menu
 */
type MenuCloseEvent = (index: string, indexPath: string[]) => void

interface MenuItemRegistered {
  index: string
  indexPath: string[]
  active: boolean
}

interface MenuItemClicked {
  index: string
  indexPath: string[]
  route?: RouteLocationRaw
}