Element NavMenu導(dǎo)航菜單的使用方法
更新時(shí)間：2020年07月27日 08:30:16 作者：ForeverJPB.
這篇文章主要介紹了Element NavMenu導(dǎo)航菜單的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
組件—導(dǎo)航菜單
頂欄
<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">我的工作臺(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 target="_blank">訂單管理</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
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 target="_blank">訂單管理</a></el-menu-item>
</el-menu>
<script>
export default {
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
側(cè)欄
<el-row class="tac">
<el-col :span="12">
<h5>默認(rèn)顏色</h5>
<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>導(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 :span="12">
<h5>自定義顏色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@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>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
折疊
<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" 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">導(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>
<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>
Menu Attribute
Menu Methods
Menu Events
SubMenu Attribute
Menu-Item Attribute
Menu-Group Attribute
到此這篇關(guān)于Element NavMenu導(dǎo)航菜單的使用方法的文章就介紹到這了,更多相關(guān)Element NavMenu導(dǎo)航菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如何解決Ajax請(qǐng)求結(jié)果的緩存問(wèn)題說(shuō)明
2013-03-03
ASP.NET實(shí)現(xiàn)Hadoop增刪改查的示例代碼
本篇文章主要介紹了ASP.NET實(shí)現(xiàn)Hadoop增刪改查的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了淺談asp.net Forms身份驗(yàn)證詳解 ，這種方法可以輕松的保持用戶的登錄狀態(tài)（如果用戶想這樣），便捷的用戶授權(quán)配置，增強(qiáng)的安全性，有興趣的可以了解一下。2016-12-12
gridview實(shí)現(xiàn)服務(wù)器端和客戶端全選的兩種方法分享
這篇文章主要介紹了gridview實(shí)現(xiàn)服務(wù)器端和客戶端全選的兩種方法,需要的朋友可以參考下2014-02-02
建立自己的RSS...2006-09-09
asp.net?core實(shí)體類(lèi)生產(chǎn)CRUD后臺(tái)管理界面
這篇文章主要為大家介紹了asp.net?core實(shí)體類(lèi)生產(chǎn)CRUD后臺(tái)管理界面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
asp.net程序優(yōu)化 盡量減少數(shù)據(jù)庫(kù)連接操作
最近做一個(gè)項(xiàng)目，做的比較郁悶，現(xiàn)在把項(xiàng)目經(jīng)驗(yàn)總結(jié)在這里。項(xiàng)目的主要功能就是為第三方程序提供數(shù)據(jù)，并根據(jù)客戶端的調(diào)用提供數(shù)據(jù)更新。我的程序?qū)儆诜?wù)端。服務(wù)端以站點(diǎn)形式部署，以Xml的數(shù)據(jù)格式輸出2012-05-05
在Linux上使用OpenCvSharp的過(guò)程詳解
在本次項(xiàng)目中,我們成功實(shí)現(xiàn)了在Linux上使用OpenCvSharp,并成功配置了OpenCvSharp依賴庫(kù),實(shí)現(xiàn)了在.NET 6.0環(huán)境下使用C#語(yǔ)言調(diào)用OpenCvSharp庫(kù),實(shí)現(xiàn)的圖片數(shù)據(jù)的讀取以及圖像色彩轉(zhuǎn)換,并進(jìn)行了圖像展示,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要給大家介紹了關(guān)于Docker結(jié)合.Net Core的初步使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
ASP.NET 回發(fā)密碼框清空問(wèn)題處理方法
這篇文章主要介紹了ASP.NET 回發(fā)密碼框清空問(wèn)題處理方法,需要的朋友可以參考下2014-03-03