關鍵字：BuildAdmin、pinia、logo、aside、menu、菜單折疊、Vue、ElementUI

前言

上一篇文章中，借助aside的實現講了一些開發的小技巧，以及css的解讀。本篇文章主要寫一下如何填充aside的內容。

aside主要是由兩個部分組成的：logo和菜單。這里明確一下需求：

1. 實現logo和菜單
2. 在點擊圖標時，菜單和logo會進行折疊
3. 封裝圖標組件

logo

logo就是一個div，這個div主要由img、項目名稱和圖標構成。其中<Icon>就是需求3中封裝的圖標組件，后面會講。

logo.png是實現選好的logo圖片，siteName是項目名稱。

菜單

菜單的實現ElementUI的menu組件，直接照抄官網的樣例代碼，然后修改菜單名即可。但是，后面要實現動態路由，菜單的名稱根據從后臺請求的數據進行渲染，所以這里需要寫一寫邏輯，后面的動態路由主要講的就是這一塊的實現。

菜單折疊功能

菜單的折疊功能如下圖所演示：

在點擊logo旁的折疊按鈕時，可以觀察到4種變化：

1. aside變窄，不再是260px
2. 折疊按鈕圖標變化
3. logo折疊（消失）
4. 菜單欄折疊，只剩圖標

當點擊折疊按鈕時，logo和menu都需要知道：“我要折疊/展開了”。我們知道logo和menu是兩個獨立的組件，而vue中的ref響應式變量只能在單組件內使用（不明白的可以看看vue的ref和reactive）。

所以我們就需要維護一個類似全局變量的東西：一個地方修改了一個變量，其他使用這個變量也會立即更新,VueX和Pinia就是干這個的。在BuildAdmin中，使用的是Pinia。stores目錄下存放的就是各種各樣的全局變量。

其中，config.ts就是pinia維護的menu共享狀態變量。

1. 菜單狀態變量

pinia定義的變量如下：

當點擊折疊按鈕時，通過修改menuCollapse就可以通知到logo和menu組件是否折疊。同時我們也看到了menuWidth變量，即菜單欄的寬度為260，那么當折疊之后寬度變為多少呢？

在pinia中定義了 menuWidth() 來計算寬度：當menuCollapse為true，即菜單折疊時，寬度是64；為false不折疊時，寬度為menuWidth，即260。

可以看到，aside的width綁定了menuWidth作為計算屬性，當menuCollapse發生變化時，menuWidth()就會被調用計算出新的寬度。

接下來，我們看看logo和menu是如何引用狀態變量實現折疊/展開的？

2. logo折疊

使用vue的v-if來控制logo的展示，當menuCollapse為true，則取反為false，即不展示img和div。

再看Icon，綁定了一個名為onMenuCollapse的點擊事件，用來修改menuCollapse，從而實現菜單欄的折疊與展開。并且當折疊時，Icon使用fa-indent圖標，展開時使用fa-dedent圖標，這樣就實現了折疊與站看圖片的切換。

3. menu折疊實現

menu使用ElementUI自身menu組件的collapse屬性來控制折疊和展開。

同樣，可以看到collapse屬性的值，引用的是pinia定義的menuCollapse變量。

4.構思分析

最后發現，只是通過一個menuCollapse變量，就實現了aside中logo和menu的折疊與展開。提出需求的同時，也可以構思實現思路：

1. 讓logo部分消失：用v-if或者v-show
2. 讓menu組件折疊：ElementUI提供了collapse屬性
3. logo和menu同步折疊和展開：用pinia定義全局狀態變量

結語

本篇文章主要寫的是logo和menu的實現。其中menu后面菜單的渲染、動態路由是BuildAdmin的一個重點，后面會用很大的篇幅去寫。下一篇先寫<Icon>組件，畢竟后面的很多地方都用到了圖標。