vue.js實現(xiàn)二級菜單效果
更新時間：2019年10月19日 15:12:27 作者：DurianPudding
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)二級菜單效果的具體方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue.js實現(xiàn)二級菜單效果的具體代碼，供大家參考，具體內(nèi)容如下
主要是對二級菜單和當前點擊的處理：
點擊導航時，如果有二級菜單，就切換二級菜單顯示狀態(tài)（顯示或者關閉），如果沒有二級菜單，就變色，表示頁面處于當前位置，并且導航中最多只能有一個菜單變色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這是一個v-for的導航條</title>
<link rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<link rel="stylesheet" href="nav.css" >
</head>
<body>
<div id="pages">
<ul id="side-menu">
<li class="menu-unit" v-for="menu in menus">
<a id="menu-url" v-bind:href="menu.url"
v-bind:class="{ 'menu-active': menu.active && !menu.secondMenus}"
v-on:click="showToggle(menu)"
>
<i v-bind:class="menu.icon"></i>
<span>{{ menu.text }}</span>
<i v-if="menu.downIcon" v-bind:class="menu.downIcon"></i>
</a>
<ul id="side-second-menu" v-if="menu.secondMenus && menu.active">
<li v-for="secMenu in menu.secondMenus" v-on:click="showToggle(menu, secMenu)">
<a v-bind:href="secMenu.url" rel="external nofollow"
v-bind:class="{ 'menu-active': secMenu.active }">
<span>{{ secMenu.text }}</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#side-menu',
data: {
menus: [
{
text: '首頁',
icon: 'glyphicon glyphicon-apple',
active: false
},
{
text: '文檔',
// url: 'https://www.baidu.com/',
icon: 'glyphicon glyphicon-book',
active: false
},
{
text: '引導頁',
// url: 'https://www.baidu.com/',
icon: 'glyphicon glyphicon-send',
active: false
},
{
text: '權(quán)限測試頁',
icon: 'glyphicon glyphicon-lock',
downIcon: 'glyphicon glyphicon-menu-down',
active: false,
secondMenus: [
{text: '頁面權(quán)限', url: '#', active: false},
{text: '權(quán)限指令', url: '#', active: false},
]
},
{
text: '圖標',
icon: 'glyphicon glyphicon-pawn',
active: false,
// url: 'https://www.baidu.com/'
},
]
},
methods: {
showToggle: function (menu, secMenu) {
// 如果傳入了二級菜單
if (secMenu) {
secMenu.active = true;
// 更新menus數(shù)據(jù)
this.refreshMenuTree(this.menus, menu, secMenu);
} else {
if (menu.secondMenus) {
menu.active = !menu.active;
} else {
menu.active = true;
// 更新menus數(shù)據(jù)
this.refreshMenuTree(this.menus, menu, secMenu);
}
}
},
/**
* 解釋：對于菜單欄active置為true的邏輯，可以簡化為，我點擊誰誰就active，其他的菜單項active都變?yōu)?
* false。但特殊情況為二級菜單，二級菜單點擊后自己的active變?yōu)閠rue，但父菜單項的active不能變false。
* 所以問題簡化為：
* 1. 點擊的菜單項的active變?yōu)閠rue
* 2. 遍歷整個菜單的所有數(shù)據(jù)項，不等于我點擊的這個菜單項的active都變?yōu)閒alse
* （但二級菜單要考慮其父菜單項不能變false，即除了我點擊的這個和我的父菜單項外都變false）
*
* 關鍵問題即：用樹的遍歷解決菜單所有數(shù)據(jù)項的遍歷和active取反,即對于被遍歷的每個菜單項來說，
* 只要不等于我傳入的一級菜單和二級菜單，active就變成false
*
* 整體邏輯即：menus中的數(shù)據(jù)項，進行遍歷，如果不等于傳入的menu或者secMenu則直接置為false
* @param menus 包含menu數(shù)據(jù)項的數(shù)組，如一級菜單數(shù)組，二級菜單數(shù)組
* @param menu 應該激活的一級菜單項
* @param secMenu 應該激活的二級菜單項
*/
refreshMenuTree(menus, menu, secMenu) {
// 開始遍歷
menus.forEach(function (item) {
// 如果菜單項不等于傳入的一級菜單項或二級菜單項，則active置為false
if (!(item === menu || item === secMenu || (item.secondMenus && item.active))) {
item.active = false;
}
// 如果菜單項包含二級菜單列表，則遍歷此列表
if (item.secondMenus) {
this.refreshMenuTree(item.secondMenus, menu, secMenu);
}
// 使用.bind(this)給函數(shù)的this綁定為外層的作用域，要不然this.refreshMenuTree方法取不到
}.bind(this));
},
}
})
</script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
右鍵菜單在項目開發(fā)中是屬于比較高頻的組件了,所以這篇文章小編主要來和大家介紹一下如何利用vue3開發(fā)一個右鍵菜單,有需要的可以參考下2024-03-03
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于Vue3中vuex的基本使用方法,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue-router 路由基礎的詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了在vue中使用jsonp進行跨域請求接口操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue 解決addRoutes動態(tài)添加路由后刷新失效問題
這篇文章主要介紹了vue 解決addRoutes動態(tài)添加路由后刷新失效問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
今天小編就為大家分享一篇解決vue同一slot在組件中渲染多次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue 動態(tài)添加路由及生成菜單的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
這篇文章主要介紹了vue-路由精講 二級路由和三級路由的作用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目中常常會用到keepalive來作緩存,在應付基本要求上能夠說很是方便,可是遇到同一個頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關于keep-alive如何清除緩存的相關資料,需要的朋友可以參考下2021-08-08