033_NavMenu导航菜单

1. NavMenu导航菜单

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

1.2. 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的index的数组	Array	无	无
unique-opened	是否只保持一个子菜单的展开	boolean	无	false
menu-trigger	子菜单打开的触发方式(只在mode为horizontal时有效)	string	hover / click	hover
router	是否使用vue-router的模式, 启用该模式会在激活导航时以index作为path进行路由跳转	boolean	无	false
collapse-transition	是否开启折叠动画	boolean	无	true

1.3. Menu Methods

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

1.4. 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

1.5. 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

1.6. Menu-Item Attribute

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

1.7. Menu-Group Attribute

参数	说明	类型
title	分组标题	string

2. NavMenu导航菜单例子

2.1. 使用脚手架新建一个名为element-ui-navmenu的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import HorizontalNavMenu from '../components/HorizontalNavMenu.vue'
import VerticalNavMenu from '../components/VerticalNavMenu.vue'
import CollapseNavMenu from '../components/CollapseNavMenu.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/HorizontalNavMenu' },
  { path: '/HorizontalNavMenu', component: HorizontalNavMenu },
  { path: '/VerticalNavMenu', component: VerticalNavMenu },
  { path: '/CollapseNavMenu', component: CollapseNavMenu }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建HorizontalNavMenu.vue

<template>
  <div>
    <h1>顶栏-适用广泛的基础用法</h1>
    <h4>导航菜单默认为垂直模式, 通过mode属性可以使导航菜单变更为水平模式。另外, 在菜单中通过submenu组件可以生成二级菜单。Menu还提供了background-color、text-color和active-text-color, 分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。</h4>
    <el-menu :default-active="activeIndex1" 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="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <div style="margin-top: 50px;"></div>
    <el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <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="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex1: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

2.4. 在components下创建VerticalNavMenu.vue

<template>
  <div>
    <h1>侧栏-垂直菜单, 可内嵌子菜单</h1>
    <h4>通过el-menu-item-group组件可以实现菜单进行分组, 分组名可以通过title属性直接设定, 也可以通过具名slot来设定。</h4>
    <el-row>
      <el-col :span="3">
        <h5>默认颜色</h5>
        <el-menu default-active="2" @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-col>
      <el-col :offset="2" :span="3">
        <h5>自定义颜色</h5>
        <el-menu default-active="2" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <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-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

2.5. 在components下创建CollapseNavMenu.vue

<template>
  <div>
    <h1>折叠</h1>
    <h4>collapse是否水平折叠收起菜单(仅在mode为vertical时可用)</h4>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <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" @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>
  </div>
</template>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
export default {
  data () {
    return {
      isCollapse: true
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

2.6. 运行项目, 访问http://localhost:8080/#/HorizontalNavMenu

2.7. 运行项目, 访问http://localhost:8080/#/VerticalNavMenu 

2.8. 运行项目, 访问http://localhost:8080/#/CollapseNavMenu