Menu 菜单

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

顶栏

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

导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。

Menu 菜单 - 图1

  1. <template>
  2.   <el-menu
  3.     :default-active="activeIndex"
  4.     class="el-menu-demo"
  5.     mode="horizontal"
  6.     @select="handleSelect"
  7.   >
  8.     <el-menu-item index="1">Processing Center</el-menu-item>
  9.     <el-sub-menu index="2">
  10.       <template #title>Workspace</template>
  11.       <el-menu-item index="2-1">item one</el-menu-item>
  12.       <el-menu-item index="2-2">item two</el-menu-item>
  13.       <el-menu-item index="2-3">item three</el-menu-item>
  14.       <el-sub-menu index="2-4">
  15.         <template #title>item four</template>
  16.         <el-menu-item index="2-4-1">item one</el-menu-item>
  17.         <el-menu-item index="2-4-2">item two</el-menu-item>
  18.         <el-menu-item index="2-4-3">item three</el-menu-item>
  19.       </el-sub-menu>
  20.     </el-sub-menu>
  21.     <el-menu-item index="3" disabled>Info</el-menu-item>
  22.     <el-menu-item index="4">Orders</el-menu-item>
  23.   </el-menu>
  24.   <div class="h-6" />
  25.   <el-menu
  26.     :default-active="activeIndex2"
  27.     class="el-menu-demo"
  28.     mode="horizontal"
  29.     background-color="#545c64"
  30.     text-color="#fff"
  31.     active-text-color="#ffd04b"
  32.     @select="handleSelect"
  33.   >
  34.     <el-menu-item index="1">Processing Center</el-menu-item>
  35.     <el-sub-menu index="2">
  36.       <template #title>Workspace</template>
  37.       <el-menu-item index="2-1">item one</el-menu-item>
  38.       <el-menu-item index="2-2">item two</el-menu-item>
  39.       <el-menu-item index="2-3">item three</el-menu-item>
  40.       <el-sub-menu index="2-4">
  41.         <template #title>item four</template>
  42.         <el-menu-item index="2-4-1">item one</el-menu-item>
  43.         <el-menu-item index="2-4-2">item two</el-menu-item>
  44.         <el-menu-item index="2-4-3">item three</el-menu-item>
  45.       </el-sub-menu>
  46.     </el-sub-menu>
  47.     <el-menu-item index="3" disabled>Info</el-menu-item>
  48.     <el-menu-item index="4">Orders</el-menu-item>
  49.   </el-menu>
  50. </template>
  52. <script lang="ts" setup>
  53. import { ref } from 'vue'
  55. const activeIndex = ref('1')
  56. const activeIndex2 = ref('1')
  57. const handleSelect = (key: string, keyPath: string[]) => {
  58.   console.log(key, keyPath)
  59. }
  60. </script>

左右

您可以将菜单项放置在左边或右边。

Menu 菜单 - 图2

  1. <template>
  2.   <el-menu
  3.     :default-active="activeIndex"
  4.     class="el-menu-demo"
  5.     mode="horizontal"
  6.     :ellipsis="false"
  7.     @select="handleSelect"
  8.   >
  9.     <el-menu-item index="0">LOGO</el-menu-item>
  10.     <div class="flex-grow" />
  11.     <el-menu-item index="1">Processing Center</el-menu-item>
  12.     <el-sub-menu index="2">
  13.       <template #title>Workspace</template>
  14.       <el-menu-item index="2-1">item one</el-menu-item>
  15.       <el-menu-item index="2-2">item two</el-menu-item>
  16.       <el-menu-item index="2-3">item three</el-menu-item>
  17.       <el-sub-menu index="2-4">
  18.         <template #title>item four</template>
  19.         <el-menu-item index="2-4-1">item one</el-menu-item>
  20.         <el-menu-item index="2-4-2">item two</el-menu-item>
  21.         <el-menu-item index="2-4-3">item three</el-menu-item>
  22.       </el-sub-menu>
  23.     </el-sub-menu>
  24.   </el-menu>
  25. </template>
  27. <script lang="ts" setup>
  28. import { ref } from 'vue'
  30. const activeIndex = ref('1')
  31. const handleSelect = (key: string, keyPath: string[]) => {
  32.   console.log(key, keyPath)
  33. }
  34. </script>
  36. <style>
  37. .flex-grow {
  38.   flex-grow: 1;
  39. }
  40. </style>

侧栏

垂直菜单，可内嵌子菜单。

通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。

Menu 菜单 - 图3

  1. <template>
  2.   <el-row class="tac">
  3.     <el-col :span="12">
  4.       <h5 class="mb-2">Default colors</h5>
  5.       <el-menu
  6.         default-active="2"
  7.         class="el-menu-vertical-demo"
  8.         @open="handleOpen"
  9.         @close="handleClose"
  10.       >
  11.         <el-sub-menu index="1">
  12.           <template #title>
  13.             <el-icon><location /></el-icon>
  14.             <span>Navigator One</span>
  15.           </template>
  16.           <el-menu-item-group title="Group One">
  17.             <el-menu-item index="1-1">item one</el-menu-item>
  18.             <el-menu-item index="1-2">item two</el-menu-item>
  19.           </el-menu-item-group>
  20.           <el-menu-item-group title="Group Two">
  21.             <el-menu-item index="1-3">item three</el-menu-item>
  22.           </el-menu-item-group>
  23.           <el-sub-menu index="1-4">
  24.             <template #title>item four</template>
  25.             <el-menu-item index="1-4-1">item one</el-menu-item>
  26.           </el-sub-menu>
  27.         </el-sub-menu>
  28.         <el-menu-item index="2">
  29.           <el-icon><icon-menu /></el-icon>
  30.           <span>Navigator Two</span>
  31.         </el-menu-item>
  32.         <el-menu-item index="3" disabled>
  33.           <el-icon><document /></el-icon>
  34.           <span>Navigator Three</span>
  35.         </el-menu-item>
  36.         <el-menu-item index="4">
  37.           <el-icon><setting /></el-icon>
  38.           <span>Navigator Four</span>
  39.         </el-menu-item>
  40.       </el-menu>
  41.     </el-col>
  42.     <el-col :span="12">
  43.       <h5 class="mb-2">Custom colors</h5>
  44.       <el-menu
  45.         active-text-color="#ffd04b"
  46.         background-color="#545c64"
  47.         class="el-menu-vertical-demo"
  48.         default-active="2"
  49.         text-color="#fff"
  50.         @open="handleOpen"
  51.         @close="handleClose"
  52.       >
  53.         <el-sub-menu index="1">
  54.           <template #title>
  55.             <el-icon><location /></el-icon>
  56.             <span>Navigator One</span>
  57.           </template>
  58.           <el-menu-item-group title="Group One">
  59.             <el-menu-item index="1-1">item one</el-menu-item>
  60.             <el-menu-item index="1-2">item two</el-menu-item>
  61.           </el-menu-item-group>
  62.           <el-menu-item-group title="Group Two">
  63.             <el-menu-item index="1-3">item three</el-menu-item>
  64.           </el-menu-item-group>
  65.           <el-sub-menu index="1-4">
  66.             <template #title>item four</template>
  67.             <el-menu-item index="1-4-1">item one</el-menu-item>
  68.           </el-sub-menu>
  69.         </el-sub-menu>
  70.         <el-menu-item index="2">
  71.           <el-icon><icon-menu /></el-icon>
  72.           <span>Navigator Two</span>
  73.         </el-menu-item>
  74.         <el-menu-item index="3" disabled>
  75.           <el-icon><document /></el-icon>
  76.           <span>Navigator Three</span>
  77.         </el-menu-item>
  78.         <el-menu-item index="4">
  79.           <el-icon><setting /></el-icon>
  80.           <span>Navigator Four</span>
  81.         </el-menu-item>
  82.       </el-menu>
  83.     </el-col>
  84.   </el-row>
  85. </template>
  87. <script lang="ts" setup>
  88. import {
  89.   Document,
  90.   Menu as IconMenu,
  91.   Location,
  92.   Setting,
  93. } from '@element-plus/icons-vue'
  94. const handleOpen = (key: string, keyPath: string[]) => {
  95.   console.log(key, keyPath)
  96. }
  97. const handleClose = (key: string, keyPath: string[]) => {
  98.   console.log(key, keyPath)
  99. }
  100. </script>

Collapse 折叠面板

垂直导航菜单可以被折叠

Menu 菜单 - 图4

  1. <template>
  2.   <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
  3.     <el-radio-button :label="false">expand</el-radio-button>
  4.     <el-radio-button :label="true">collapse</el-radio-button>
  5.   </el-radio-group>
  6.   <el-menu
  7.     default-active="2"
  8.     class="el-menu-vertical-demo"
  9.     :collapse="isCollapse"
  10.     @open="handleOpen"
  11.     @close="handleClose"
  12.   >
  13.     <el-sub-menu index="1">
  14.       <template #title>
  15.         <el-icon><location /></el-icon>
  16.         <span>Navigator One</span>
  17.       </template>
  18.       <el-menu-item-group>
  19.         <template #title><span>Group One</span></template>
  20.         <el-menu-item index="1-1">item one</el-menu-item>
  21.         <el-menu-item index="1-2">item two</el-menu-item>
  22.       </el-menu-item-group>
  23.       <el-menu-item-group title="Group Two">
  24.         <el-menu-item index="1-3">item three</el-menu-item>
  25.       </el-menu-item-group>
  26.       <el-sub-menu index="1-4">
  27.         <template #title><span>item four</span></template>
  28.         <el-menu-item index="1-4-1">item one</el-menu-item>
  29.       </el-sub-menu>
  30.     </el-sub-menu>
  31.     <el-menu-item index="2">
  32.       <el-icon><icon-menu /></el-icon>
  33.       <template #title>Navigator Two</template>
  34.     </el-menu-item>
  35.     <el-menu-item index="3" disabled>
  36.       <el-icon><document /></el-icon>
  37.       <template #title>Navigator Three</template>
  38.     </el-menu-item>
  39.     <el-menu-item index="4">
  40.       <el-icon><setting /></el-icon>
  41.       <template #title>Navigator Four</template>
  42.     </el-menu-item>
  43.   </el-menu>
  44. </template>
  46. <script lang="ts" setup>
  47. import { ref } from 'vue'
  48. import {
  49.   Document,
  50.   Menu as IconMenu,
  51.   Location,
  52.   Setting,
  53. } from '@element-plus/icons-vue'
  55. const isCollapse = ref(true)
  56. const handleOpen = (key: string, keyPath: string[]) => {
  57.   console.log(key, keyPath)
  58. }
  59. const handleClose = (key: string, keyPath: string[]) => {
  60.   console.log(key, keyPath)
  61. }
  62. </script>
  64. <style>
  65. .el-menu-vertical-demo:not(.el-menu--collapse) {
  66.   width: 200px;
  67.   min-height: 400px;
  68. }
  69. </style>

Menu 属性

属性说明类型可选值默认值
mode菜单展示模式stringhorizontal / verticalvertical
collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean—false
ellipsis是否省略多余的子项（仅在横向模式生效）boolean—true
background-color菜单的背景颜色（十六进制格式）（已被废弃，使用—bg-color）string—#ffffff
text-color文字颜色（十六进制格式）（已被废弃，使用—text-color）string—#303133
active-text-color活动菜单项的文本颜色（十六进制格式）（已被废弃，使用—active-color）string—#409EFF
default-active页面加载时默认激活菜单的 indexstring——
default-openeds默认打开的 sub-menu 的 index 的数组Array——
unique-opened是否只保持一个子菜单的展开boolean—false
menu-trigger子菜单打开的触发方式，只在 mode 为 horizontal 时有效。stringhover / clickhover
router是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。boolean—false
collapse-transition是否开启折叠动画boolean—true

Menu 方法

方法名说明参数
open展开指定的 sub-menuindex: 需要打开的 sub-menu 的 index
close收起指定的 sub-menuindex: 需要收起的 sub-menu 的 index

Menu 事件

事件名说明回调参数
select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path, item: 选中菜单项, routeResult: vue-router 的返回值（如果 router 为 true）
opensub-menu 展开的回调index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index path
closesub-menu 收起的回调index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path

Menu 插槽

插槽名说明子标签
—自定义默认内容SubMenu / Menu-Item / Menu-Item-Group

SubMenu 属性

属性说明类型可选值默认值
index唯一标志string——
popper-class为 popper 添加类名string——
show-timeout展开 sub-menu 的延时number—300
hide-timeout收起 sub-menu 的延时number—300
disabled是否禁用boolean—false
popper-append-to-body（已废弃）是否将弹出菜单插入至 body 元素。 在菜单的定位出现问题时，可尝试修改该属性boolean—一级子菜单：true / 非一级子菜单：false
popper-offset弹出窗口偏移number—6
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父菜单收起且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效string | Component——
collapse-open-icon父菜单收起且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效string | Component——

SubMenu 插槽

插槽名说明子标签
—自定义默认内容SubMenu / Menu-Item / Menu-Item-Group
title自定义标题内容—

Menu-Item 属性

属性说明类型可选值默认值
index唯一标志string/null—null
routeVue Router 路径对象object——
disabled是否禁用boolean—false

Menu-Item 事件

事件名说明回调参数
click菜单点击时的回调函数el-menu-item 实例

Menu-Item 插槽

插槽名说明
—自定义默认内容
title自定义标题内容

Menu-Item-Group 属性

属性说明类型可选值默认值
title组标题string——

Menu-Item-Group 插槽

插槽名说明子标签
—默认插槽内容Menu-Item
title自定义组标题内容—

源代码

组件 Menu 菜单 - 图5 • 文档 Menu 菜单 - 图6

贡献者

Menu 菜单 - 图7 云游君

Menu 菜单 - 图8 三咲智子

Menu 菜单 - 图9 RealityBoy

Menu 菜单 - 图10 jeremywu

Menu 菜单 - 图11 zz

Menu 菜单 - 图12 Aex

Menu 菜单 - 图13 kooriookami

Menu 菜单 - 图14 msidolphin

Menu 菜单 - 图15 C.Y.Kun

Menu 菜单 - 图16 Delyan Haralanov

Menu 菜单 - 图17 Yuyao Nie

Menu 菜单 - 图18 Alan Wang

Menu 菜单 - 图19 feiyu

Menu 菜单 - 图20 ParkerFiend

Menu 菜单 - 图21 Carter Li

Menu 菜单 - 图22 iamkun

Menu 菜单 - 图23 blackie

Menu 菜单 - 图24 SongWuKong

Menu 菜单 - 图25 renovate[bot]

Menu 菜单 - 图26 BeADre

Menu 菜单 - 图27 gjfei

Menu 菜单 - 图28 Jimmy

Menu 菜单 - 图29 on the field of hope

Menu 菜单 - 图30 Square Coin

Menu 菜单 - 图31 Hades-li

Menu 菜单 - 图32 Juliano Penna

Menu 菜单 - 图33 BaboonKing

Menu 菜单 - 图34 qiang