NavMenu 导航菜单

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

顶栏

适用广泛的基础用法。

NavMenu 导航菜单 - 图1

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

  1. <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  2.   <el-menu-item index="1">处理中心</el-menu-item>
  3.   <el-submenu index="2">
  4.     <template #title>我的工作台</template>
  5.     <el-menu-item index="2-1">选项1</el-menu-item>
  6.     <el-menu-item index="2-2">选项2</el-menu-item>
  7.     <el-menu-item index="2-3">选项3</el-menu-item>
  8.     <el-submenu index="2-4">
  9.       <template #title>选项4</template>
  10.       <el-menu-item index="2-4-1">选项1</el-menu-item>
  11.       <el-menu-item index="2-4-2">选项2</el-menu-item>
  12.       <el-menu-item index="2-4-3">选项3</el-menu-item>
  13.     </el-submenu>
  14.   </el-submenu>
  15.   <el-menu-item index="3" disabled>消息中心</el-menu-item>
  16.   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  17. </el-menu>
  18. <div class="line"></div>
  19. <el-menu
  20.   :default-active="activeIndex2"
  21.   class="el-menu-demo"
  22.   mode="horizontal"
  23.   @select="handleSelect"
  24.   background-color="#545c64"
  25.   text-color="#fff"
  26.   active-text-color="#ffd04b">
  27.   <el-menu-item index="1">处理中心</el-menu-item>
  28.   <el-submenu index="2">
  29.     <template #title>我的工作台</template>
  30.     <el-menu-item index="2-1">选项1</el-menu-item>
  31.     <el-menu-item index="2-2">选项2</el-menu-item>
  32.     <el-menu-item index="2-3">选项3</el-menu-item>
  33.     <el-submenu index="2-4">
  34.       <template #title>选项4</template>
  35.       <el-menu-item index="2-4-1">选项1</el-menu-item>
  36.       <el-menu-item index="2-4-2">选项2</el-menu-item>
  37.       <el-menu-item index="2-4-3">选项3</el-menu-item>
  38.     </el-submenu>
  39.   </el-submenu>
  40.   <el-menu-item index="3" disabled>消息中心</el-menu-item>
  41.   <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  42. </el-menu>
  44. <script>
  45.   export default {
  46.     data() {
  47.       return {
  48.         activeIndex: '1',
  49.         activeIndex2: '1'
  50.       };
  51.     },
  52.     methods: {
  53.       handleSelect(key, keyPath) {
  54.         console.log(key, keyPath);
  55.       }
  56.     }
  57.   }
  58. </script>

侧栏

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

NavMenu 导航菜单 - 图2

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

  1. <el-row class="tac">
  2.   <el-col :span="12">
  3.     <h5>默认颜色</h5>
  4.     <el-menu
  5.       default-active="2"
  6.       class="el-menu-vertical-demo"
  7.       @open="handleOpen"
  8.       @close="handleClose">
  9.       <el-submenu index="1">
  10.         <template #title>
  11.           <i class="el-icon-location"></i>
  12.           <span>导航一</span>
  13.         </template>
  14.         <el-menu-item-group>
  15.           <template #title>分组一</template>
  16.           <el-menu-item index="1-1">选项1</el-menu-item>
  17.           <el-menu-item index="1-2">选项2</el-menu-item>
  18.         </el-menu-item-group>
  19.         <el-menu-item-group title="分组2">
  20.           <el-menu-item index="1-3">选项3</el-menu-item>
  21.         </el-menu-item-group>
  22.         <el-submenu index="1-4">
  23.           <template #title>选项4</template>
  24.           <el-menu-item index="1-4-1">选项1</el-menu-item>
  25.         </el-submenu>
  26.       </el-submenu>
  27.       <el-menu-item index="2">
  28.         <i class="el-icon-menu"></i>
  29.         <template #title>导航二</template>
  30.       </el-menu-item>
  31.       <el-menu-item index="3" disabled>
  32.         <i class="el-icon-document"></i>
  33.         <template #title>导航三</template>
  34.       </el-menu-item>
  35.       <el-menu-item index="4">
  36.         <i class="el-icon-setting"></i>
  37.         <template #title>导航四</template>
  38.       </el-menu-item>
  39.     </el-menu>
  40.   </el-col>
  41.   <el-col :span="12">
  42.     <h5>自定义颜色</h5>
  43.     <el-menu
  44.       default-active="2"
  45.       class="el-menu-vertical-demo"
  46.       @open="handleOpen"
  47.       @close="handleClose"
  48.       background-color="#545c64"
  49.       text-color="#fff"
  50.       active-text-color="#ffd04b">
  51.       <el-submenu index="1">
  52.         <template #title>
  53.           <i class="el-icon-location"></i>
  54.           <span>导航一</span>
  55.         </template>
  56.         <el-menu-item-group>
  57.           <template #title>分组一</template>
  58.           <el-menu-item index="1-1">选项1</el-menu-item>
  59.           <el-menu-item index="1-2">选项2</el-menu-item>
  60.         </el-menu-item-group>
  61.         <el-menu-item-group title="分组2">
  62.           <el-menu-item index="1-3">选项3</el-menu-item>
  63.         </el-menu-item-group>
  64.         <el-submenu index="1-4">
  65.           <template #title>选项4</template>
  66.           <el-menu-item index="1-4-1">选项1</el-menu-item>
  67.         </el-submenu>
  68.       </el-submenu>
  69.       <el-menu-item index="2">
  70.         <i class="el-icon-menu"></i>
  71.         <template #title>导航二</template>
  72.       </el-menu-item>
  73.       <el-menu-item index="3" disabled>
  74.         <i class="el-icon-document"></i>
  75.         <template #title>导航三</template>
  76.       </el-menu-item>
  77.       <el-menu-item index="4">
  78.         <i class="el-icon-setting"></i>
  79.         <template #title>导航四</template>
  80.       </el-menu-item>
  81.     </el-menu>
  82.   </el-col>
  83. </el-row>
  85. <script>
  86.   export default {
  87.     methods: {
  88.       handleOpen(key, keyPath) {
  89.         console.log(key, keyPath);
  90.       },
  91.       handleClose(key, keyPath) {
  92.         console.log(key, keyPath);
  93.       }
  94.     }
  95.   }
  96. </script>

折叠

NavMenu 导航菜单 - 图3

  1. <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  2.   <el-radio-button :label="false">展开</el-radio-button>
  3.   <el-radio-button :label="true">收起</el-radio-button>
  4. </el-radio-group>
  5. <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  6.   <el-submenu index="1">
  7.     <template #title>
  8.       <i class="el-icon-location"></i>
  9.       <span>导航一</span>
  10.     </template>
  11.     <el-menu-item-group>
  12.       <template #title>分组一</template>
  13.       <el-menu-item index="1-1">选项1</el-menu-item>
  14.       <el-menu-item index="1-2">选项2</el-menu-item>
  15.     </el-menu-item-group>
  16.     <el-menu-item-group title="分组2">
  17.       <el-menu-item index="1-3">选项3</el-menu-item>
  18.     </el-menu-item-group>
  19.     <el-submenu index="1-4">
  20.       <template #title>选项4</template>
  21.       <el-menu-item index="1-4-1">选项1</el-menu-item>
  22.     </el-submenu>
  23.   </el-submenu>
  24.   <el-menu-item index="2">
  25.     <i class="el-icon-menu"></i>
  26.     <template #title>导航二</template>
  27.   </el-menu-item>
  28.   <el-menu-item index="3" disabled>
  29.     <i class="el-icon-document"></i>
  30.     <template #title>导航三</template>
  31.   </el-menu-item>
  32.   <el-menu-item index="4">
  33.     <i class="el-icon-setting"></i>
  34.     <template #title>导航四</template>
  35.   </el-menu-item>
  36. </el-menu>
  38. <style>
  39.   .el-menu-vertical-demo:not(.el-menu--collapse) {
  40.     width: 200px;
  41.     min-height: 400px;
  42.   }
  43. </style>
  45. <script>
  46.   export default {
  47.     data() {
  48.       return {
  49.         isCollapse: true
  50.       };
  51.     },
  52.     methods: {
  53.       handleOpen(key, keyPath) {
  54.         console.log(key, keyPath);
  55.       },
  56.       handleClose(key, keyPath) {
  57.         console.log(key, keyPath);
  58.       }
  59.     }
  60.   }
  61. </script>

Menu Attribute

参数说明类型可选值默认值
mode模式stringhorizontal / verticalvertical
collapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean—false
background-color菜单的背景色（仅支持 hex 格式）string—#ffffff
text-color菜单的文字颜色（仅支持 hex 格式）string—#303133
active-text-color当前激活菜单的文字颜色（仅支持 hex 格式）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 进行路由跳转boolean—false
collapse-transition是否开启折叠动画boolean—true

Menu Methods

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

Menu Events

事件名称说明回调参数
select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
opensub-menu 展开的回调index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
closesub-menu 收起的回调index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path

SubMenu Attribute

参数说明类型可选值默认值
index唯一标志string/null—null
popper-class弹出菜单的自定义类名string——
show-timeout展开 sub-menu 的延时number—300
hide-timeout收起 sub-menu 的延时number—300
disabled是否禁用boolean—false
popper-append-to-body是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性boolean—一级子菜单：true / 非一级子菜单：false

Menu-Item Attribute

参数说明类型可选值默认值
index唯一标志string——
routeVue Router 路径对象Object——
disabled是否禁用boolean—false

Menu-Group Attribute

参数说明类型可选值默认值
title分组标题string——