1. NavMenu導(dǎo)航菜單

1.1. NavMenu導(dǎo)航菜單為網(wǎng)站提供導(dǎo)航功能的菜單。

1.2. Menu Attribute

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
mode	模式	string	horizontal / vertical	vertical
collapse	是否水平折疊收起菜單(僅在mode為vertical時(shí)可用)	boolean	無(wú)	false
background-color	菜單的背景色(僅支持hex格式)	string	無(wú)	#ffffff
text-color	菜單的文字顏色(僅支持hex格式)	string	無(wú)	#303133
active-text-color	當(dāng)前激活菜單的文字顏色(僅支持hex格式)	string	無(wú)	#409EFF
default-active	當(dāng)前激活菜單的index	string	無(wú)	無(wú)
default-openeds	當(dāng)前打開(kāi)的sub-menu的index的數(shù)組	Array	無(wú)	無(wú)
unique-opened	是否只保持一個(gè)子菜單的展開(kāi)	boolean	無(wú)	false
menu-trigger	子菜單打開(kāi)的觸發(fā)方式(只在mode為horizontal時(shí)有效)	string	hover / click	hover
router	是否使用vue-router的模式, 啟用該模式會(huì)在激活導(dǎo)航時(shí)以index作為path進(jìn)行路由跳轉(zhuǎn)	boolean	無(wú)	false
collapse-transition	是否開(kāi)啟折疊動(dòng)畫(huà)	boolean	無(wú)	true

1.3. Menu Methods

方法名稱	說(shuō)明	參數(shù)
open	展開(kāi)指定的sub-menu	index: 需要打開(kāi)的sub-menu的index
close	收起指定的sub-menu	index: 需要收起的sub-menu的index

1.4. Menu Events

事件名稱	說(shuō)明	回調(diào)參數(shù)
select	菜單激活回調(diào)	index: 選中菜單項(xiàng)的index, indexPath: 選中菜單項(xiàng)的index path
open	sub-menu展開(kāi)的回調(diào)	index: 打開(kāi)的sub-menu的index, indexPath: 打開(kāi)的sub-menu的index path
close	sub-menu收起的回調(diào)	index: 收起的sub-menu的index, indexPath: 收起的sub-menu的index path

1.5. SubMenu Attribute

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
index	唯一標(biāo)志	string/null	無(wú)	null
popper-class	彈出菜單的自定義類名	string	無(wú)	無(wú)
show-timeout	展開(kāi)sub-menu的延時(shí)	number	無(wú)	300
hide-timeout	收起sub-menu的延時(shí)	number	無(wú)	300
disabled	是否禁用	boolean	無(wú)	false
popper-append-to-body	是否將彈出菜單插入至body元素。在菜單的定位出現(xiàn)問(wèn)題時(shí), 可嘗試修改該屬性	boolean	無(wú)	一級(jí)子菜單: true / 非一級(jí)子菜單: false

1.6. Menu-Item Attribute

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
index	唯一標(biāo)志	string	無(wú)	無(wú)
route	Vue Router路徑對(duì)象	Object	無(wú)	無(wú)
disabled	是否禁用	boolean	無(wú)	false

1.7. Menu-Group Attribute

參數(shù)	說(shuō)明	類型
title	分組標(biāo)題	string

2. NavMenu導(dǎo)航菜單例子

2.1. 使用腳手架新建一個(gè)名為element-ui-navmenu的前端項(xiàng)目, 同時(shí)安裝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下創(chuàng)建HorizontalNavMenu.vue

<template><div><h1>頂欄-適用廣泛的基礎(chǔ)用法</h1><h4>導(dǎo)航菜單默認(rèn)為垂直模式, 通過(guò)mode屬性可以使導(dǎo)航菜單變更為水平模式。另外, 在菜單中通過(guò)submenu組件可以生成二級(jí)菜單。Menu還提供了background-color、text-color和active-text-color, 分別用于設(shè)置菜單的背景色、菜單的文字顏色和當(dāng)前激活菜單的文字顏色。</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">我的工作臺(tái)</template><el-menu-item index="2-1">選項(xiàng)1</el-menu-item><el-menu-item index="2-2">選項(xiàng)2</el-menu-item><el-menu-item index="2-3">選項(xiàng)3</el-menu-item><el-submenu index="2-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item><el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item><el-menu-item index="2-4-3">選項(xiàng)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">我的工作臺(tái)</template><el-menu-item index="2-1">選項(xiàng)1</el-menu-item><el-menu-item index="2-2">選項(xiàng)2</el-menu-item><el-menu-item index="2-3">選項(xiàng)3</el-menu-item><el-submenu index="2-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item><el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item><el-menu-item index="2-4-3">選項(xiàng)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下創(chuàng)建VerticalNavMenu.vue

<template><div><h1>側(cè)欄-垂直菜單, 可內(nèi)嵌子菜單</h1><h4>通過(guò)el-menu-item-group組件可以實(shí)現(xiàn)菜單進(jìn)行分組, 分組名可以通過(guò)title屬性直接設(shè)定, 也可以通過(guò)具名slot來(lái)設(shè)定。</h4><el-row><el-col :span="3"><h5>默認(rèn)顏色</h5><el-menu default-active="2" @open="handleOpen" @close="handleClose"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span>導(dǎo)航一</span></template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="1-1">選項(xiàng)1</el-menu-item><el-menu-item index="1-2">選項(xiàng)2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">導(dǎo)航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">導(dǎo)航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">導(dǎo)航四</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>導(dǎo)航一</span></template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="1-1">選項(xiàng)1</el-menu-item><el-menu-item index="1-2">選項(xiàng)2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">導(dǎo)航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">導(dǎo)航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">導(dǎo)航四</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下創(chuàng)建CollapseNavMenu.vue

<template><div><h1>折疊</h1><h4>collapse是否水平折疊收起菜單(僅在mode為vertical時(shí)可用)</h4><el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"><el-radio-button :label="false">展開(kāi)</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">導(dǎo)航一</span></template><el-menu-item-group><span slot="title">分組一</span><el-menu-item index="1-1">選項(xiàng)1</el-menu-item><el-menu-item index="1-2">選項(xiàng)2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">選項(xiàng)4</span><el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">導(dǎo)航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">導(dǎo)航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">導(dǎo)航四</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. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/HorizontalNavMenu

2.7. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/VerticalNavMenu?

2.8. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/CollapseNavMenu?

總結(jié)

以上是生活随笔為你收集整理的033_NavMenu导航菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。