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

关键字: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)。

所以我们就需要维护一个类似全局变量的东西:一个地方修改了一个变量,其他使用这个变量也会立即更新,VueXPinia就是干这个的。在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>组件,毕竟后面的很多地方都用到了图标。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/215401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构与算法-Rust 版读书笔记-2线性数据结构-栈

数据结构与算法-Rust 版读书笔记-2线性数据结构-栈 一、线性数据结构概念 数组、栈、队列、双端队列、链表这类数据结构都是保存数据的容器&#xff0c;数据项之间的顺序由添加或删除时的顺序决定&#xff0c;数据项一旦被添加&#xff0c;其相对于前后元素就会一直保持位置不…

电脑入门基础知识

1.电脑键盘个数一般都是有多少个&#xff1f; 答&#xff1a;一般情况下&#xff0c;电脑键盘只有一个。但是&#xff0c;也有一些特殊的情况&#xff0c;例如游戏玩家可能会使用额外的游戏键盘&#xff0c;或者一些专业人士可能会使用多个键盘来提高工作效率。但是在大多数情…

[Spring~源码] ControllerAdvice揭秘

在Spring MVC中&#xff0c;我们经常使用ControllerAdvice注解&#xff0c;可以实现全局统一异常处理、全局数据绑定等功能。但是&#xff0c;它的实现原理是什么呢&#xff1f;在本文中&#xff0c;我们将深入探究ControllerAdvice的实现原理。 文章目录 什么是ControllerAdvi…

docker-compose.yml文件配置详解

简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose&#xff0c;您可以使用 YML 文件来配置应用程序需要的所有服务。然后&#xff0c;使用一个命令&#xff0c;就可以从 YML 文件配置中创建并启动所有服务。 docker compose文件是一个yaml格式的文件&a…

【Hadoop_04】HDFS的API操作与读写流程

1、HDFS的API操作1.1 客户端环境准备1.2 API创建文件夹1.3 API上传1.4 API参数的优先级1.5 API文件夹下载1.6 API文件删除1.7 API文件更名和移动1.8 API文件详情和查看1.9 API文件和文件夹判断 2、HDFS的读写流程&#xff08;面试重点&#xff09;2.1 HDFS写数据流程2.2 网络拓…

学会面向对象经典练习题21道

1.面向对象练习&#xff1a;设计小狗类 需求&#xff1a; 抽象形成一个小狗类Dog 属性&#xff1a;名字name 年龄age 品种kind 主人host 价格price 功能&#xff1a; 跑run&#xff1a;无参&#xff0c;打印&#xff1a;小狗Dog跑的老快了~ 吃eat&#xff1a;参数int n&#x…

当MongoDB主键为String时,mongoTemplate无法根据id查询的问题

MongoDB推荐使用ObjectId作为主键&#xff0c;但国内的开发都知道&#xff0c;事情往往不如人所愿&#xff0c;当我们真的出现了“_id”主键的类型为String时&#xff0c;且还必须想用mongoTemplate.findOne或findList时&#xff0c;直接使用该方法会导致查询结果为空。 因为m…

https 协议

目录 加密方式 对称加密 非对称加密 非对称加密 非对称加密 非对称加密 对称加密 AC证书 AC证书内容 数据摘要 数据签名 在我们前面学习的http协议里面&#xff0c;我们发送的内容都是明文传输的&#xff0c;所以在安全上并不安全&#xff0c;但是在现在信息发达的时…

Java高级技术:优化性能与扩展性的最佳实践

标题&#xff1a;Java高级技术&#xff1a;优化性能与扩展性的最佳实践 摘要&#xff1a;本文将介绍Java中一些高级技术&#xff0c;以提高性能和代码的扩展性。本文不包括反射和并发编程&#xff0c;旨在帮助开发者进一步提升Java应用程序的质量和可维护性。 优化性能的最佳实…

面试题目总结(三)

1. Spring、Springboot、springMVC、Spring Cloud 的区别&#xff1a; Spring&#xff1a;Spring 是一个开源的、轻量级的Java框架&#xff0c;提供了丰富的功能和组件&#xff0c;用于构建企业级应用程序。Spring框架包含了很多模块&#xff0c;包括核心容器、数据访问、事物…

MATLAB算法实战应用案例精讲-【数模应用】漫谈机器学习(七)

目录 几个高频面试题目 机器学习算法工程师需要掌握哪些编程语言? 1.Python 2. C# 3.JavaScript 4. R 5.Java

Linux之Apache服务器安装及配置

一、Apache服务器简介 Apache HTTP Server&#xff08;简称Apache&#xff09;是Apache软件基金会的一个开放源码的网页服务器&#xff0c;可以在大多数计算机操作系统中运行&#xff0c;由于其多平台和安全性被广泛使用。Apache曾经是世界使用排名第一的Web服务器软件&#xf…

VSCODE连接远程服务器

安装ssh插件 根据你的操作系统选择对应的版本进行下载和安装。 安装完成之后&#xff0c;启动vscode&#xff0c;选择左侧Extensions 选项卡&#xff0c;在输入框搜索 remote &#xff0c;选择安装Remote-SSH插件。 安装完成之后会在左侧新增一个选项卡Remote Explorer&#xf…

肥猫游戏报价器|计价器|王者荣耀代练陪练等游戏报价器软件介绍说明

目录 1. 前言2. 软件著作权3. 软件使用说明3.1 进入软件3.2 用户登录3.3 首页3.4 报价器3.4.1 总体介绍3.4.2 王者报价器3.4.3 LOL手游报价器3.4.4 英雄联盟报价器3.4.5 云顶之弈报价器3.4.7 王者水晶报价器3.4.8 和平精英报价器3.4.9 蛋仔派对报价器3.4.10 穿越火线报价器3.4.…

kafka学习笔记--broker工作流程、重要参数

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…

Linux mc命令教程:如何有效地使用mc命令(附案例详解和注意事项)

Linux mc命令介绍 mc命令是Linux中的一个视觉文件管理器&#xff0c;全称为Midnight Commander。它提供了一个用户友好的界面&#xff0c;使得在Linux环境中的文件和目录管理变得更加直观和方便。mc命令支持鼠标操作和颜色显示&#xff0c;同时也提供了一套菜单接口&#xff0…

TypeScript 常用高级类型

目录 前言&#xff1a; TypeScript 常用高级类型 基本概念 高级类型 1. 交叉类型&#xff08;Intersection Types&#xff09; 2. 联合类型&#xff08;Union Types&#xff09; 3. 映射类型&#xff08;Mapped Types&#xff09; 4. 条件类型&#xff08;Conditional…

GGML 或GGUF的14种不同量化模式说明

查看 TheBloke/Llama-2–13B-chat-GGML 存储库中的文件&#xff0c;我们可以看到 14 种不同的 GGML 模型&#xff0c;对应于不同类型的量化。它们遵循特定的命名约定&#xff1a;“q” 用于存储权重的位数&#xff08;精度&#xff09; 特定变体。以下是所有可能的量化方法及其…

Pytorch-Transformer轴承故障一维信号分类(三)

目录 前言 1 数据集制作与加载 1.1 导入数据 第一步&#xff0c;导入十分类数据 第二步&#xff0c;读取MAT文件驱动端数据 第三步&#xff0c;制作数据集 第四步&#xff0c;制作训练集和标签 1.2 数据加载&#xff0c;训练数据、测试数据分组&#xff0c;数据分batch…

据房间Id是否存在,判断当前房间是否到期且实时更改颜色

重点代码展示&#xff1a; <template><el-col style"width: 100%;height: 100%;"><el-col :span"20"><el-card class"room_info"><avue-data-icons :option"option"></avue-data-icons></el-…