大数据毕业设计之前端03：logo、menu的折叠展开实现

蔚落 2024-02-05 13:19 6阅读 0赞

> 关键字：BuildAdmin、pinia、logo、aside、menu、菜单折叠、Vue、ElementUI

### 前言 ###

上一篇文章中，借助aside的实现讲了一些开发的小技巧，以及css的解读。本篇文章主要写一下如何填充aside的内容。

aside主要是由两个部分组成的：logo和菜单。这里明确一下需求：

1.  实现logo和菜单
2.  在点击图标时，菜单和logo会进行折叠
3.  封装图标组件

### logo ###

logo就是一个div，这个div主要由img、项目名称和图标构成。其中<Icon>就是需求3中封装的图标组件，后面会讲。

![4f636af28be18fbe7813f86da22e684a.png][]

logo.png是实现选好的logo图片，siteName是项目名称。

### 菜单 ###

菜单的实现ElementUI的menu组件，直接照抄官网的样例代码，然后修改菜单名即可。但是，后面要实现动态路由，菜单的名称根据从后台请求的数据进行渲染，所以这里需要写一写逻辑，后面的**动态路由**主要讲的就是这一块的实现。

![98b76c623bddb8bfb4581b285bbf364e.png][]

#### 菜单折叠功能 ####

菜单的折叠功能如下图所演示：

![729fe04a1eca7e1020cc70a9672f0c05.gif][]

在点击logo旁的折叠按钮时，可以观察到4种变化：

1.  aside变窄，不再是260px
2.  折叠按钮图标变化
3.  logo折叠（消失）
4.  菜单栏折叠，只剩图标

当点击折叠按钮时，logo和menu都需要知道：“我要折叠/展开了”。我们知道logo和menu是两个独立的组件，而vue中的*ref*响应式变量只能在单组件内使用（不明白的可以看看vue的ref和reactive）。

所以我们就需要维护一个类似全局变量的东西：*一个地方修改了一个变量，其他使用这个变量也会立即更新*,**VueX**和**Pinia**就是干这个的。在BuildAdmin中，使用的是Pinia。*stores*目录下存放的就是各种各样的全局变量。

![231c6c89dd42c0a4369ba890895f726a.png][]

其中，*config.ts*就是pinia维护的menu共享状态变量。

##### 1. 菜单状态变量 #####

pinia定义的变量如下：

![e52b3e611971bc0688f22ba9f5dc6f61.png][]

当点击折叠按钮时，通过修改*menuCollapse*就可以通知到logo和menu组件是否折叠。同时我们也看到了*menuWidth*变量，即菜单栏的宽度为260，那么当折叠之后宽度变为多少呢？

![18a4c07e6719ea58d5237ff9b0701eb9.png][]

在pinia中定义了 *menuWidth()* 来计算宽度：**当menuCollapse为true，即菜单折叠时，宽度是64；为false不折叠时，宽度为menuWidth，即260**。

![b8e4755443c4552f7c82d6c03497536e.png][]

可以看到，aside的width绑定了menuWidth作为计算属性，当menuCollapse发生变化时，menuWidth()就会被调用计算出新的宽度。

接下来，我们看看logo和menu是如何引用状态变量实现折叠/展开的？

##### 2. logo折叠 #####

![b682b632d98f7c293c7d280e56e4519b.png][]

使用vue的**v-if**来控制logo的展示，当menuCollapse为true，则取反为false，即不展示img和div。

再看Icon，绑定了一个名为*onMenuCollapse*的点击事件，用来修改menuCollapse，从而实现菜单栏的折叠与展开。并且当折叠时，Icon使用*fa-indent*图标，展开时使用*fa-dedent*图标，这样就实现了折叠与站看图片的切换。

##### 3. menu折叠实现 #####

menu使用ElementUI自身menu组件的**collapse**属性来控制折叠和展开。

![7f5f9d85e85092037a45df520eed09b0.png][]

同样，可以看到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>组件，毕竟后面的很多地方都用到了图标。

![20210519233121183.png][]

[4f636af28be18fbe7813f86da22e684a.png]: https://img-blog.csdnimg.cn/img_convert/4f636af28be18fbe7813f86da22e684a.png
[98b76c623bddb8bfb4581b285bbf364e.png]: https://img-blog.csdnimg.cn/img_convert/98b76c623bddb8bfb4581b285bbf364e.png
[729fe04a1eca7e1020cc70a9672f0c05.gif]: https://img-blog.csdnimg.cn/img_convert/729fe04a1eca7e1020cc70a9672f0c05.gif
[231c6c89dd42c0a4369ba890895f726a.png]: https://img-blog.csdnimg.cn/img_convert/231c6c89dd42c0a4369ba890895f726a.png
[e52b3e611971bc0688f22ba9f5dc6f61.png]: https://img-blog.csdnimg.cn/img_convert/e52b3e611971bc0688f22ba9f5dc6f61.png
[18a4c07e6719ea58d5237ff9b0701eb9.png]: https://img-blog.csdnimg.cn/img_convert/18a4c07e6719ea58d5237ff9b0701eb9.png
[b8e4755443c4552f7c82d6c03497536e.png]: https://img-blog.csdnimg.cn/img_convert/b8e4755443c4552f7c82d6c03497536e.png
[b682b632d98f7c293c7d280e56e4519b.png]: https://img-blog.csdnimg.cn/img_convert/b682b632d98f7c293c7d280e56e4519b.png
[7f5f9d85e85092037a45df520eed09b0.png]: https://img-blog.csdnimg.cn/img_convert/7f5f9d85e85092037a45df520eed09b0.png
[20210519233121183.png]: https://img-blog.csdnimg.cn/20210519233121183.png