大数据毕业设计之前端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.rhkb.cn/news/267051.html

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

相关文章

【数据库管理系统】Mysql 8.0.36入门级安装

下载地址 官方网址&#xff1a;MySQL 注意事项 建议不要安装最新版本&#xff0c;一般找mysql5.0或mysql8.0系列版本即可&#xff1b;mysq1官网有.zip和.msi两种安装形式&#xff1b;zip是压缩包&#xff0c;直接解压缩以后使用的&#xff0c;需要自己配置各种东西&#xff…

就业班 2401--3.1 Linux Day9--文件查找和压缩

一、文件查找与打包压缩 grep: 文件内容过滤 [rootqfedu.com ~]# grep root /etc/passwd #从/etc/passwd文件中过滤root字段 grep ^root root$ root:x:0:0:root:/root:/bin/bash operator:x:11:0:operator:/root:/sbin/nologin 查找命令 [rootqfedu.com ~]# which ls ali…

MyBatis 学习(四)之 SQL 映射文件

目录 1 SQL 映射文件介绍 2 select 元素 3 insert 元素 4 update 和 delete 元素 5 sql 元素 6 parameterType 元素 7 resultType 元素 8 resultMap 元素&#xff08;重要&#xff09; 9 参考文档 1 SQL 映射文件介绍 映射器是 MyBatis 中最复杂并且是最重要的…

章鱼网络 Community Call #18|Omnity 将首先支持 Runes 协议资产跨链

香港时间2024年2月8日12点&#xff0c;章鱼网络举行第18期 Community Call。 2024年&#xff0c;我们打开一个良好的局面&#xff1a;$NEAR Restaking 已经完成第三方审计&#xff0c;并且经过几次迭代&#xff0c;进入了正式稳定运行的阶段。更重要的是&#xff0c;我们宣布了…

AI Word Helper (Chorme Extentions) AI单词助手(谷歌浏览器插件)

AI Word Helper (Chorme Extentions) AI单词助手&#xff08;谷歌浏览器插件&#xff09; 英文网站&#xff0c;划词查单词&#xff0c;还是看不懂&#xff1f;因为单词意思那么多&#xff0c;词性搞不清&#xff0c;上下文搞不清&#xff0c;出来的意思就没法用&#xff0c;G…

Tomcat 架构

一、Http工作原理 HTTP协议是浏览器与服务器之间的数据传送协议。作为应用层协议&#xff0c;HTTP是基于TCP/IP协议来传递数据的&#xff08;HTML文件、图片、查询结果等&#xff09;&#xff0c;HTTP协议不涉及数据包&#xff08;Packet&#xff09;传输&#xff0c;主要规定了…

汇编反外挂

在软件保护领域&#xff0c;尤其是游戏保护中&#xff0c;反外挂是一个重要的议题。外挂通常指的是一种第三方软件&#xff0c;它可以修改游戏数据、操作游戏内存或提供其他作弊功能&#xff0c;从而给玩家带来不公平的优势。为了打击外挂&#xff0c;游戏开发者会采取一系列措…

PyQt6的开发流程(密码生成小程序为例)

PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09; 文章目录 PyQt6的开发流程&#xff08;密码生成小程序为例&#xff09;一、流程介绍与概览1. 界面与逻辑分离的开发流程2. PyQt6的开发流程 二、打开 designer.exe 创建文件三、用QT设计师绘制界面保存成ui1. QT常用…

Python实现MACD工具判断信号:股票技术分析的工具系列(1)

Python实现MACD工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;1&#xff09; 介绍代码rolling函数介绍核心代码计算指数移动平均值计算MACD指标 完整代码 介绍 先看看官方介绍&#xff1a; MACD (平滑异同平均线&#xff09; 指标说明 DIF线&#xff1a;收盘价短…

“智农”-数字乡村可视化

“智农”打造数字乡村可视化&#xff0c;结合乡村区域实际情况&#xff0c;以规划完善乡村机制体系和更好服务乡村振兴为目标&#xff0c;坚持可持续、可复制、可扩展的建设原则&#xff0c;着力解决农村信息孤岛&#xff0c;提高农村种植技术&#xff0c;加快农村信息化和产业…

前端按钮动画

效果示例 代码示例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevic…

echarts vue 动画效果的水球图、波浪图教程

1、安装插件 前提是已经安装了echarts&#xff08;我的版本是4.2.1&#xff09; npm install echarts-liquidfill --save 我安装了3.1.0版本的&#xff0c;结果运行时报错"TypeError: wave.ensureState is not a function" 原因&#xff1a;echarts版本和echarts-l…

IDC 中搭建 Serverless 应用平台:通过 ACK One 和 Knative 玩转云资源

作者&#xff1a;元毅、庄宇 如何打造云上&#xff08;公共云&#xff09;、云下&#xff08;IDC 数据中心&#xff09;统一的云原生 Serverless 应用平台&#xff0c;首先我们来看一下 ChatGPT 4 会给出什么样的答案&#xff1a; 如何打造云上、云下统一的云原生 Serverless…

MySQL 多表查询 连接查询 内连接

介绍 内连接查询是两张表中交集的部分 连接模式 隐式内连接 SELECT 字段列表 FROM 表1,表2 WHERE 条件显式内连接 SELECT 字段列表 FROM 表1 [INNER] JOIN 表2 ON 连接条件案例 有两张表一个表为学生表&#xff0c;另一个表为班级表&#xff0c;现在需要查询学生时候在查…

2023中国PostgreSQL数据库生态大会:洞察前沿趋势,探索无限可能(附核心PPT资料下载)

随着数字化浪潮的推进&#xff0c;数据库技术已成为支撑各行各业数字化转型的核心力量。2023中国PostgreSQL数据库生态大会的召开&#xff0c;无疑为业界提供了一个深入交流、共同探索PostgreSQL数据库技术未来发展趋势的平台。本文将带您走进这场盛会&#xff0c;解析大会的亮…

Laravel Octane 和 Swoole 协程的使用分析二

又仔细研究了下 Octane 源码和 Swoole 的文档&#xff0c;关于前几天 Laravel Octane 和 Swoole 协程的使用分析中的猜想&#xff0c;得到进一步验证&#xff1a; Swoole 的 HTTP Server 启动后会创建一个 master 进程和一个 manager 进程&#xff1b;master 进程又会创建多个…

XUbuntu22.04之解决:仓库xxx没有数字签名问题(二百一十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Linux 系统安装/卸载 Nginx教程

优质博文&#xff1a;IT-BLOG-CN 一、安装Nginx 【1】首先通过Nginx官网确定需要安装的版本&#xff0c;如果Linux联网则直接在Linux服务上使用wget命令将Nginx安装包下载到/usr/local/目录下&#xff1a; [rootxxx local]# wget -c http://nginx.org/download/nginx-1.22.1.…

qt 5.15版本安装

1.qt5.15版本安装 2.安装慢时&#xff0c;切换到清华镜像源&#xff1a;.\qt-unified-windows-x64-online.exe --mirror https://mirrors.tuna.tsinghua.edu.cn/qt/ 3.没有qt 5.15版本在旁边进行筛选&#xff0c;只选archive

雅马哈伺服器TS-S系列说明具体详情内容可参看PDF目录内容

雅马哈伺服器TS-S系列说明具体详情内容可参看PDF目录内容