Menu 菜单

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

提示

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

css

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

顶部导航

顶部导航菜单可以在各种场景中使用。

默认情况下，菜单是垂直的，但您可以通过将 mode 属性设置为 'horizontal' 将其更改为水平的。此外，您还可以使用子菜单组件创建二级菜单。菜单提供 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 折叠面板

垂直菜单可以折叠。

展开折叠

Popper 偏移量 2.4.4

带有 popperOffset 的 Menu 将覆盖 Submenu 的 popper-offset。

名称	描述	类型	默认值
mode	菜单显示模式	`枚举`	vertical
折叠	是否水平折叠菜单（仅在垂直模式下可用）	`boolean`	false
ellipsis	是否省略菜单（仅在水平模式下可用）	`boolean`	true
ellipsis-icon 2.4.4	自定义省略图标（仅在水平模式且 ellipsis 为 true 时可用）	`string` / `Component`	—
popper-offset 2.4.4	Popper 的偏移量（对所有子菜单生效）	`number`	6
default-active	页面加载时激活菜单的索引	`string`	''
default-openeds	包含当前激活子菜单索引的数组	`object`	[]
unique-opened	是否只有一个子菜单可以被激活	`boolean`	false
menu-trigger	子菜单如何被触发，仅在 `mode` 为 'horizontal' 时有效	`枚举`	悬浮时
router	是否激活 `vue-router` 模式。如果为 true，索引将被用作 '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	所有弹出菜单的自定义类名	`string`	—
show-timeout 2.5.0	控制所有菜单显示前的超时时间	`number`	300
hide-timeout 2.5.0	控制所有菜单隐藏前的超时时间	`number`	300
background-color 已废弃	菜单的背景色（十六进制格式）（请改用样式类中的 `--el-menu-bg-color`）	`string`	#ffffff
text-color 已废弃	菜单的文本颜色（十六进制格式）（请改用样式类中的 `--el-menu-text-color`）	`string`	#303133
active-text-color 已废弃	当前激活菜单项的文本颜色（十六进制格式）（请改用样式类中的 `--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	打开一个特定的子菜单，参数是要打开的子菜单的索引	`Function`
关闭	关闭一个特定的子菜单，参数是要关闭的子菜单的索引	`Function`
handleResize	手动触发菜单宽度重新计算	`Function`
updateActiveIndex 2.9.8	设置活动菜单的索引	`Function`

SubMenu API

SubMenu 属性

名称	描述	类型	默认值
index 必填	唯一标识	`string`	—
popper-class	弹出菜单的自定义类名	`string`	—
show-timeout	显示子菜单前的超时时间（默认继承菜单的 `show-timeout`）	`number`	—
hide-timeout	隐藏子菜单前的超时时间（默认继承菜单的 `hide-timeout`）	`number`	—
disabled	子菜单是否禁用	`boolean`	false
teleported	弹出菜单是否被传送到 body，一级 SubMenu 默认为 true，其他 SubMenu 默认为 false	`boolean`	undefined
popper-offset	Popper 的偏移量（覆盖菜单的 `popper`）	`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
}