資訊專欄INFORMATION COLUMN
摘要：先看這個值即為判斷顯示展開還是收縮狀態(tài)的開關(guān)。這樣就實現(xiàn)了展開狀態(tài)下的菜單。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發(fā)一個完整的的單頁面后臺管理程序。
涉及到路由，權(quán)限等等相關(guān)內(nèi)容的部分，跟本文主旨關(guān)系不大，所以我將會在另外一篇文章中詳述，混在一起的話內(nèi)容太多了
基于element-ui的左側(cè)可伸縮的菜單
通過vuejs來開發(fā)支持展開收縮的菜單是非常簡單的，只需要v-if v-else即可簡單實現(xiàn)，下面我分步驟詳細(xì)講解過程，并在后續(xù)的系列文章中詳細(xì)講解權(quán)限菜單、路由過濾等等一些實用的技巧。當(dāng)然還包括完整實現(xiàn)后臺管理頁面所要重點關(guān)注的細(xì)節(jié)。
如何把權(quán)限菜單展示出來呢？
首先，這是一個動態(tài)菜單，該顯示什么樣的菜單需要從后端獲取，規(guī)則方面如下：
[
{
"label": "這個菜單",
"id": 001，
"parntid": 0
},
{
"label": "那個菜單",
"id": 002,
"parntid": 0
},
{
"label": "二個菜單",
"id": 003,
"parntid": 001
},
{
"label": "三個菜單",
"id": 003,
"parntid": 001
},
{
"label": "四個菜單",
"id": 003,
"parntid": 002
},
{
"label": "吳個菜單",
"id": 003,
"parntid": 002
}
]
注意：我這里是用的兩級菜單，同樣的原理可以很簡單的生成多級的。json中通過id來實現(xiàn)父子關(guān)聯(lián)，也可以改成多級的json，用child來表示子級，子級的子級。這樣也可以很容易的生成多級的多級菜單。不過通常也就兩級或者三級。原理相同很容易擴(kuò)展，如果不知道怎么擴(kuò)展歡迎加入qq群：478694438來探討。
下面看一下菜單的展示，需要aside標(biāo)簽，aside標(biāo)簽是html5的標(biāo)簽，沒見過aside ？不要緊換成div也行。先看效果，再看代碼（代碼看上去有點長，別被嚇著，我后面詳細(xì)講解）：
這是收縮的狀態(tài)：
這是展開的狀態(tài)：
來分析一下這些亂糟糟的代碼（這是我從源碼中截出來的所以看起來有點亂）：、changeState這三個都是aside標(biāo)簽下的同級的標(biāo)簽，分別對應(yīng)：展開狀態(tài)下的菜單、收縮狀態(tài)下的菜單、切換狀態(tài)的箭頭。
先看el-menu：
{{item.permissionName}} {{child.permissionName}}
collapsed這個值即為判斷顯示展開還是收縮狀態(tài)的開關(guān)。對照ul下的v-else看。通過一個v-for 循環(huán)除所有的父級菜單，再次循環(huán)尋找子級菜單中parentId==id的子菜單，作為該父級菜單下的子菜單。這樣就實現(xiàn)了展開狀態(tài)下的菜單。
注意：圖標(biāo)的問題，圖標(biāo)可以選擇從后端返回class，這樣做起來起來更簡單，我這里是通過預(yù)設(shè)一個getIcon（）函數(shù)在本地設(shè)置顯示，由于圖標(biāo)和路由面臨的是相同的實現(xiàn)，所以我會在路由跳轉(zhuǎn)相關(guān)的地方詳細(xì)解釋一下，應(yīng)該在何種場景下選擇何種方式。
再看ul：
這根element-ui就沒有關(guān)系了，簡單的ul li 實現(xiàn)。（路由相關(guān)的可以展示忽略，我會在下一篇文章中詳細(xì)描述）
最后看：
通過collapsed 在v-if v-else中綁定視圖簡單實現(xiàn)了，開關(guān)功能。
寫在最后
這個功能看似簡單卻包含了vuejs的十幾個知識點。難倒了很多人，我之所有寫這篇文章，也是因為很多朋友，在此之前不斷的詢問我如何才能優(yōu)雅的實現(xiàn)這個功能。當(dāng)然了這只一個完整的后臺管理的開始，我將會在后面的文章中繼續(xù)講解關(guān)于大家最關(guān)心的要不要使用addRoutes，如何使用addRoutes，不使用addRoutes的情況下如何使用路由攔截來有沒的實現(xiàn)路由與權(quán)限的匹配，包括系統(tǒng)內(nèi)部不同權(quán)限展示不同的操作界面的問題，當(dāng)然了這是后話。如果有時間的話，我會把這個系列寫完，知道朋友們能獨立開發(fā)一個完整的vuejs的單頁面后臺管理程序。
另
文中設(shè)計的代碼我將會上傳到討論群中（478694438），不足之處優(yōu)化共同探討。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/88484.html
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內(nèi)容早已過期或是很多近期優(yōu)秀組件未被收錄，所以小肆今天重新更新了內(nèi)容并新建項目。提交的項目格式如下項目名稱子標(biāo)題相關(guān)介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內(nèi)容早已過期或是很多近期優(yōu)...
摘要：導(dǎo)語下文實戰(zhàn)之后臺管理系統(tǒng)開發(fā)二該文章將從頭到尾梳理我是如何使用開發(fā)一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構(gòu)建項目框架準(zhǔn)備對于大陸用戶，建議將的注冊表源設(shè)置為國內(nèi)的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導(dǎo)語 下文：Vue 2.x 實戰(zhàn)之后臺管理系統(tǒng)開發(fā)（二） 該文章將從頭到尾梳理我是如何使用 Vue 2 開發(fā)一個后臺管理項目的，我會將自己遇到的問...
摘要：要顯示的錯誤提示則可以即可。寫在最后的以上三點已經(jīng)完全覆蓋了所有表單驗證的情況，可以實現(xiàn)非常復(fù)雜的驗證。正式基于這些原因，我堅信是正確的選擇。 前言 老是遇到一些朋友問一些element-ui組件使用相關(guān)的基礎(chǔ)問題，因為官方文檔上并沒有提供所有瑣碎的功能代碼demo。從這里開始我會根據(jù)我實際遇到的問題記錄一些常見的官方文檔沒有詳述的功能代碼，供給大家拓展思路。 1. 以中國大陸手機(jī)號驗...
閱讀 3342·2021-11-24 10:43
閱讀 4303·2021-11-24 10:33
閱讀 3889·2021-11-22 09:34
閱讀 2203·2021-10-11 10:58
閱讀 3864·2021-10-11 10:58
閱讀 947·2021-09-27 13:36
閱讀 3726·2019-08-30 15:54
閱讀 3052·2019-08-29 18:41
