大数据毕业设计之前端04:管理系统为什么要自己实现图标组件

关键字:BuildAdmin、Icon、图标、Vue、ElementUI

前言

说到图标,在BuildAdmin中用到的地方很多。比如上一篇中的折叠图标,还有菜单栏图标、导航菜单栏图标等。常见的图标有:ElementUI图标、font-awesome、iconfont阿里图标以及本地svg这四类图标。

在使用四种不同的图标时,使用的标签都是不一样的,所以定义一个统一的组件,使用一个标签就能包含四类图标是非常有必要的。当然,这只是其中的一个原因,至于其他原因可以接着看下文。

这里先放出架构图,可以看完整篇文章之后再回来看。

图标icon

BuildAdmin在aside中主要使用了两种图标:

1. 菜单图标

用的是官方 @element-plus/icons-vue

图标库链接:https://element-plus.org/zh-CN/component/icon.html

2. 折叠按钮

用的是font-awesome图标库,使用npm安装后即可使用。

npm i font-awesome

图标使用

BuildAdmin中,封装了一个Icon组件,作为定义图标的组件。

后来会重点分析代码,这里先思考:为什么要为图标单独封装一个组件? 这里先看看两种图标的用法。

<!-- 定义icons-vue图标 -->
<el-icon :size="size" :color="color"><Edit />
</el-icon><!--  定义font-awesome图标 -->
<i class="fa fa-camera-retro fa-lg"></i>

首先,两种图标的写法不一致。其次,如果说是遍历菜单路由的时候,如何确认el-icon要使用哪个图标? 这一点主要在动态路由会讲,这里先简单的提一下。

什么意思呢?就是你从后端请求了菜单列表,控制台菜单要用图标A,会员中心菜单要用图标B,你该如何用el-icon渲染这些图标标签呢?从上面的代码示例可以看到,你只有把Edit替换成A和B才会显示A/B图标,但是在代码里想要替换,难度还是挺大的。

所以这个时候就需要定义一个类似于方法的东西,设置一个图标参数,根据图标参返回一个现成的图标。这个Icon组件就相当于这个”方法“,会根据你传入的A、B来返回对应的图标。

封装ElementPlus图标

逐个分析实现原理,这里先从ElementPlus图标开始。

1. Icon的使用

先回顾一下封装好的Icon是如何使用的。

<Iconv-if="config.layout.layoutMode != 'Streamline'"@click="onMenuCollapse":name="config.layout.menuCollapse ? 'fa fa-indent' : 'fa fa-dedent'":class="config.layout.menuCollapse ? 'unfold' : ''":color="config.getColorVal('menuActiveColor')"size="18"class="fold"
/>

v-if、click这些可以先不用管,这些都是逻辑、事件的属性。这里主要关注name、class、size、color这些基本属性标签。

这里说一下,上面的config就是上一篇提到的pinia定义的状态变量config.ts。

2.定义Icon

使用 defineComponent 定义Icon组件,在TypeScript中必须使用这个方法定义。使用props接收Icon组件的参数(vue中的props和emits一定要好好学,都是父子组件之间传递参数的)。

这纯纯的是vue选项式写法。name表示这个组件是Icon,props里面定义的是传入参数,这里是name、size、color。type表示类型,required表示是否必须,defalut表示默认值。在Icon使用示例中,三个属性都定义了。

在setup()中对接收到的参数进行一个预处理,主要是给size加上px单位。接下来,就是如何根据这些参数来渲染对应的图标。

3. 渲染对应图标

这里可以看到,如果name是以el-icon开头,就渲染一个Element Plus的图标,如果是fa开头,就渲染font-awesome的图标。h() 就是vue的渲染函数,相当于createVnode()

h()的用法在官网里面有,至于如何确定里面的class、style参数,同样可以从控制台里面看。

可以看到font-awesome的图标,在编译之后就是一个i元素,我们在使用Icon时,传入的参数name为fa fa-indent,根据浏览器中渲染后的i标签的class,只需要再拼接上icon和空格就可以。

这就是反向学习,从应用结果中来推断一个知识点的用法。

3.Element Plus图标注册

和font-awesome不同的是,Element的el-icon是组件,需要先加载然后才能使用。根据官方文档将每个icon组件注册,只不过在注册时,在icon的name之前统一加上el-icon前缀,这样便于在Icon中识别。

定义了一个 registerIcons() 方法来注册Icon。其中,app是全局的根节点,调用component() 来加载Icon,然后遍历Element中所有的标签进行注册加载。

同样,可以在浏览器查看el-icon在h()中渲染的class和style。

4. 加载Icon

最后,在main.ts中调用registerIcons完成加载。

import {registerIcons} from '@/utils/icons'const app = createApp(App)
registerIcons(app)

这样,我们就可以使用<Icon>标签以及el-icon标签。

结语

本篇文章主要写了Icon图标的注册,Icon作为一个“门面”,为使用多种类型的图标提供了统一的规范。在BuildAadmin的Icon实现中,对本地svg图标加载也进行了实现。

我本来觉得svg用不到,就在Icon中只实现了el-icon和front-awesome两种图标,后来在实现导航栏时又回过头来,实现了svg图标,这个就留给下篇文章。

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

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

相关文章

94. 递归实现排列型枚举 刷题笔记

思路 依次枚举 每个位置用哪个数字 要求按照字典序最小来输出 而每次搜索下一层时i都是从1开始 也就是说 如果有小的数可以填上 那么该方案会填上这个数字 例如 当n等于3 第一次搜索 1 2 3输出后返回 返回后此时i3 第二个位置填3 1 3 2 输出后返回 此时返回到第一层…

云计算 2月21号 (linux文件及用户管理)

一、文件管理 1.1快捷键 编辑命令&#xff1a; Ctrl a &#xff1a;移到命令行首 Ctrl e &#xff1a;移到命令行尾 Ctrl u &#xff1a;从光标处删除至命令行首 Ctrl k &#xff1a;从光标处删除至命令行尾 Ctrl w &#xff1a;从光标处删除至字首 Ctrl d &#x…

20240301-2-ZooKeeper面试题(二)

11. Chroot 特性 3.2.0 版本后&#xff0c;添加了 Chroot 特性&#xff0c;该特性允许每个客户端为自己设置一个命名空间。如果一个客户端设置了 Chroot&#xff0c;那么该客户端对服务器的任何操作&#xff0c;都将会被限制在其自己的命名空间下。 通过设置 Chroot&#xff…

Win11远程桌面登陆教程

必备软件 Remote Desktop 这个软件用于便捷操作 Tailscale 这个用于创建虚拟局域网让两台设备处于同一个网段便于远程连接 详细步骤 0、打开电脑设置允许远程连接模式 把这里的开关打开就行。 1、设置允许登陆的用户以及密码 在管理员模式下的宿主电脑上面输入以下命令…

支付宝小程序中唤起支付(前后端)

Java后台获取支付宝支付唯一订单号 /*** 支付宝小程序支付*/PostMapping(value "/xcxPayZFBTHREE")ResponseBodypublic Map<String,Object> xcxPayZFBTHREE(RequestBody byte[] req) {HashMap<String, Object> objectObjectMap new HashMap<>();…

jax可微分编程的笔记(7)

jax可微分编程的笔记(7) 第七章 优化算法 从优化理论的整体框架来看&#xff0c;任何优化问题都可以被分解为 模型的建立&#xff0c;损失函数的构造以及优化算法的选取这三个部分。 其中优化算法的具体形式&#xff0c;又依赖于步长下降方向和终止条件 的选取。 对于多维函…

JavaScript 浏览器元素滚动 scrollIntoView()

scrollIntoView() ​ DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失&#xff0c;不同浏览器实现了不同的控制滚动的方式。在所有这些专有方法中&#xff0c;HTML5 选择了标准化 scrollIntoView()。 ​ scrollIntoView() 方法存在于所有 HTML …

深度学习中常见的backbone、neck、head的理解

在深度学习中&#xff0c;常见的backbone、neck和head是指网络结构的不同部分&#xff0c;它们各自承担着不同的功能&#xff1a; Backbone&#xff08;骨干网络&#xff09;&#xff1a;骨干网络通常是指整个深度神经网络的主要部分&#xff0c;负责提取输入数据的特征。骨干网…

寒假作业Day 02

这是第二天的作业&#xff0c;fighting&#xff01; Day 02 一、选择题 首先char* s[6]是指针数组&#xff0c;也就是其存储的都是这些字符串的地址&#xff0c;其实际上的类型为char**&#xff0c;而fun函数传入了s数组的首地址。而后续fun函数中打印字符&#xff0c;p[i]即…

ad18学习笔记十六:如何放置精准焊盘到特定位置,捕抓功能的讲解

网上倒是一堆相关的指导 AD软件熟练度提升&#xff0c;如何设置板框捕捉&#xff1f;_哔哩哔哩_bilibili 关于Altium Designer 20 的捕抓功能的讲解_ad捕捉设置-CSDN博客 AD软件捕捉进阶实例&#xff0c;如何精确的放置布局元器件&#xff1f;_哔哩哔哩_bilibili AD绘制PCB…

项目-SERVER模块-Socket模块

Socket模块 一、Socket模块是什么&#xff1f;二、代码实现1.成员变量2.构造、析构函数3.获取套接字文件描述符4.创建套接字5.绑定地址信息6.开始监听连接请求7.向服务器发起连接8.获取新连接9.接收数据10.非阻塞接收数据11.发送数据12.非阻塞发送数据13.关闭套接字14.创建一个…

何时使用子查询?一个使用子查询的SQL示例及其工作原理

何时使用子查询&#xff1f;给出一个使用子查询的SQL示例&#xff0c;并解释其工作原理。 子查询&#xff0c;也称为内部查询或嵌套查询&#xff0c;是嵌入在另一个SQL查询中的查询。外部查询&#xff0c;有时称为外部查询或主查询&#xff0c;是包含子查询的查询。子查询可以…

20240301作业

1.使用fwrite、fread将一张随意的bmp图片&#xff0c;修改成德国的国旗 #include <stdio.h> #include <string.h> #include <unistd.h> #include <stdlib.h> int main(int argc, const char *argv[]) {FILE* fp fopen("./gaoda.bmp","…

24.3.1 《CLR via C#》 笔记9

第十二章 泛型 泛型&#xff1a;支持泛型值类型、泛型引用类型、泛型接口、泛型委托&#xff1b;允许在引用类型、值类型和接口中定义泛型方法&#xff1b;泛型参数变量要么称为T&#xff0c;要么以T开头 具有泛型类型参数的类型称为开放类型&#xff0c;不允许构造实例&#…

Java毕业设计 基于SpringBoot vue 社区团购系统

Java毕业设计 基于SpringBoot vue 社区团购系统 SpringBoot vue 社区团购系统 功能介绍 前端用户: 首页 图片轮播 商品信息 商品分类展示 搜索 商品详情 点我收藏 添加到购物车 立即购买 我要开团 去参团 评论 公告资讯 资讯详情 登录 注册 个人中心 更新信息 点我充值 我的订…

Mysql笔记3

1、快速创建表 原理&#xff1a; 将一个查询结果当做一张表新建 这个可以完成表的快速复制 create table emp2 as select * from emp; mysql> select * from emp2; ---------------------------------------------------------------------- …

【vscode提取函数快捷键】提取函数,减少大方法的复杂度

在 Visual Studio Code 中&#xff0c;提取函数的快捷键取决于你所使用的编程语言和安装的插件。以下是一些常用的快捷键组合&#xff0c;可以用来在 Visual Studio Code 中提取函数&#xff1a; 执行以下步骤来提取函数&#xff1a; 选中要提取的代码块。右键单击选中的代码…

System Verilog学习笔记(十二)——数组(2)

System Verilog学习笔记&#xff08;十二&#xff09;——数组&#xff08;2&#xff09; 动态数组 在编译时不会为其定制尺寸&#xff0c;而是在仿真运行时来确定动态数组一开始为空&#xff0c;需要使用new[ ]来为其分配空间声明方式 int dyn[],d2[]; //声明了两个动态数组…

git之远程操作

一.分布式版本控制系统 分布式版本控制系统通常也有⼀台充当“中央服务器”的电脑&#xff0c;但这个服务器的作⽤仅仅是⽤来⽅便“交换”⼤家的修改&#xff0c;没有它⼤家也⼀样⼲活&#xff0c;只是交换修改不⽅便⽽已。有了这个“中央服务器”的电脑&#xff0c;这样就不怕…

ChatGPT学习第四周

&#x1f4d6; 学习目标 ChatGPT实践操作 通过实际操作和练习&#xff0c;加深对ChatGPT功能的理解。 项目&#xff1a;创建一个ChatGPT应用案例 设计一个基于ChatGPT的小项目&#xff0c;将理论应用于实践。 ✍️ 学习活动 学习资料 《万字干货&#xff01;ChatGPT 从零完…