• NavMenu 导航菜单
    • 顶栏
    • 侧栏
    • 折叠
    • Menu Attribute
    • Menu Methods
    • Menu Events
    • SubMenu Attribute
    • Menu-Item Attribute
    • Menu-Group Attribute

    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 slot="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 slot="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 slot="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 slot="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 slot="title">
    11.           <i class="el-icon-location"></i>
    12.           <span>导航一</span>
    13.         </template>
    14.         <el-menu-item-group>
    15.           <template slot="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 slot="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.         <span slot="title">导航二</span>
    30.       </el-menu-item>
    31.       <el-menu-item index="3" disabled>
    32.         <i class="el-icon-document"></i>
    33.         <span slot="title">导航三</span>
    34.       </el-menu-item>
    35.       <el-menu-item index="4">
    36.         <i class="el-icon-setting"></i>
    37.         <span slot="title">导航四</span>
    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 slot="title">
    53.           <i class="el-icon-location"></i>
    54.           <span>导航一</span>
    55.         </template>
    56.         <el-menu-item-group>
    57.           <template slot="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 slot="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.         <span slot="title">导航二</span>
    72.       </el-menu-item>
    73.       <el-menu-item index="3" disabled>
    74.         <i class="el-icon-document"></i>
    75.         <span slot="title">导航三</span>
    76.       </el-menu-item>
    77.       <el-menu-item index="4">
    78.         <i class="el-icon-setting"></i>
    79.         <span slot="title">导航四</span>
    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 slot="title">
    8.       <i class="el-icon-location"></i>
    9.       <span slot="title">导航一</span>
    10.     </template>
    11.     <el-menu-item-group>
    12.       <span slot="title">分组一</span>
    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.       <span slot="title">选项4</span>
    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.     <span slot="title">导航二</span>
    27.   </el-menu-item>
    28.   <el-menu-item index="3" disabled>
    29.     <i class="el-icon-document"></i>
    30.     <span slot="title">导航三</span>
    31.   </el-menu-item>
    32.   <el-menu-item index="4">
    33.     <i class="el-icon-setting"></i>
    34.     <span slot="title">导航四</span>
    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——