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?

總結

以上是生活随笔為你收集整理的033_NavMenu导航菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。