Element-Ui组件NavMenu导航菜单的具体使⽤本⽂来源于Element官⽅⽂档：
基础⽤法
普通导航菜单
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">处理中⼼</el-menu-item>
<el-submenu index="2">
<template slot="title">我的⼯作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中⼼</el-menu-item>
<el-menu-item index="4"><a href="" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
</el-menu>
导航菜单垂直导航条
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航⼀</span>
</template>
<el-menu-item-group>
<template slot="title">分组⼀</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航⼆</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
折叠导航条
<el-radio-group v-model="isCollapse" >
<el-radio-button :label="false">展开</el-radio-button>
<el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">  <el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航⼀</span>
</template>
<el-menu-item-group>
<span slot="title">分组⼀</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航⼆</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
Menu Attribute：
参数类型说明可选值默认值
mode模式string horizontal /
vertical
vertical
collapse是否⽔平折叠收起菜单（仅在 mode 为 vertical 时可⽤）boolean—false background-
color菜单的背景⾊（仅⽀持 hex 格式）string—ffffff text-color菜单的⽂字颜⾊（仅⽀持 hex 格式）string—303133 active-text-
color当前激活菜单的⽂字颜⾊（仅⽀持 hex 格式）string—409EFF default-active当前激活菜单的 index string——default-
openeds当前打开的sub-menu的 key 数组Array——unique-
opened是否只保持⼀个⼦菜单的展开boolean—false menu-trigger⼦菜单打开的触发⽅式(只在 mode 为 horizontal 时有效)string—hover
router是否使⽤ vue-router 的模式，启⽤该模式会在激活导航时以 index 作为 path
进⾏路由跳转
boolean—false Menu Methods:
事件名称说明参数
open展开指定的 sub-menu index：需要打开的 sub-menu 的 index
close收起指定的 sub-menu index：需要收起的 sub-menu 的 index
Menu Events:
事件名称说明回调参数
select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
open sub-menu 展开的回调index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
close sub-menu 收起的回调index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path SubMenu Attribute:
参数说明类型可选值默认值
mode唯⼀标志string——
参数说明类型可选值默认值
mode弹出菜单的⾃定义类名string——
mode展开 sub-menu 的延时number—300
mode收起 sub-menu 的延时number—300
mode是否禁⽤boolean—false
Menu-Item Attribute:
参数说明类型可选值默认值
index唯⼀标志string——
route Vue Router 路径对象Object——
disabled是否禁⽤boolean—false
Menu-Group Attribute:
参数说明类型可选值默认值
title分组标题string——
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。