[Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式

记录一次在Vue中动态使用阿里巴巴矢量图标库

这是本人第一次使用阿里巴巴的矢量图标库,简单的导入和使用的话网上的教程很多,这里不多赘述,本人的需求是从数据库中加载出来并且显示到页面上,接下来简述一下如何实现。

以下代码均是本人实际推敲、测试可用后写出来的,请放心食用。



前言

阿里巴巴矢量图标库(以下简称阿里巴巴图标)针对每一个图标提供了三种编码方式,分别是UnicodeFont classSymbol。它们的名称特点如下:




方式一 | 动态加载Unicode编码


如上图所示:Unicode图标的名字是&开头;结尾的一个编码,在阿里巴巴的官方教程中它的使用如下:

官方写法:

<i class="iconfont">&#xe600;</i>

错误写法:针对这种编码方式的动态加载,我在网上并没有找到可用的教程。不过我的理解很简单,标签里面的class="iconfont"写死,标签中间写上它的编码就可以。我最初的想法很简单,用插值表达式嘛,所以代码如下(失败了)

<i class="iconfont">{{item.icon}}</i>

上面的代码仅仅是将数据库中的一段显示的放在了前端,效果嘛,本来该出现图标的位置出现的是&#xe600;这一串字符。

正确写法:稍作思考后,我想到了HTML中常用的空格,也就是&nbsp;等。我觉得Unicode编码也许不能作为文本来处理,应该用html来处理,因此我们应该使用v-html来取代插值表达式,代码如下:

<i class="iconfont" v-html="item.icon"></i>

我在数据库中存储的数据如下(显示效果如右侧所示):





方式二 | 使用Font class的方式

其实Font class的图标我觉得更好用一些,使用起来有点像是element-ui的图标,官方教程如下。

官方写法:

<span class="iconfont icon-sp-xxx"></span>

'icon-sp-'是我自己定义的前缀,下载图标的时候可以设置。

这种写法很简单,因此如果要从数据库中查出来显示到前端的话,只要如下就可以(注意空格):

<i :class="'iconfont '+item.icon"></i>

相较于官方教程写死class,这种方式只不过是给class绑定了一个字符串 + 空格 + item,很好理解,不多赘述,下面是我数据库中存储的数据与前端显示效果:

记得存储的时候忽略最前面的.

第三种方式就省略吧,因为针对于动态导入,我们考虑的只有名字或者是编码,而只看名字的话,第二种种方式和第三种方式别无二致,一样用吧。

拓展

当然了,针对方式二稍作改变,将iconfont icon-sp-shezhi这整个字段存储在数据库中,然后前段代码如下也是可以显示的:

<i :class="item.icon"></i>

数据库中存储数据与显示效果如下所示:

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

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

相关文章

【数据结构与算法】之数组系列-20240114

这里写目录标题 一、414. 第三大的数二、448. 找到所有数组中消失的数字三、561. 数组拆分四、594. 最长和谐子序列 一、414. 第三大的数 简单 给你一个非空数组&#xff0c;返回此数组中第三大的数。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输入&…

阿里状态机引擎实现

状态机的技术选型看这篇就够了&#xff0c;最后一个直叫好&#xff01; - 掘金 实现一个状态机引擎&#xff0c;教你看清DSL的本质_cola状态机-CSDN博客 一、引入jar包 <!--阿里状态机jar--> <dependency><groupId>com.alibaba.cola</groupId><a…

大创项目推荐 深度学习疲劳检测 驾驶行为检测 - python opencv cnn

文章目录 0 前言1 课题背景2 相关技术2.1 Dlib人脸识别库2.2 疲劳检测算法2.3 YOLOV5算法 3 效果展示3.1 眨眼3.2 打哈欠3.3 使用手机检测3.4 抽烟检测3.5 喝水检测 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习加…

虚拟机配置固定IP

1.DHCP 当前我们虚拟机的Linux操作系统&#xff0c;其IP地址是通过DHCP服务获取的。 DHCP&#xff1a;动态获取IP地址&#xff0c;即每次重启设备后都会获取一次&#xff0c;可能导致IP地址频繁变更&#xff0c;这就会给我们带来不方便&#xff0c;因为如果我们每次重启设备都…

2024年AMC8模拟考试实测流程、注意事项和常见问题

和往年的AMC8比赛一样&#xff0c;在正式比赛的前一周左右会开放两天的模拟考试时间&#xff0c;AMC8的主办方建议所有的参赛选手重视且参加模拟考试&#xff0c;以测试设备、熟悉流程&#xff0c;避免将来正式考试不小心违规&#xff0c;或者设备不给力。 2024年的AMC8模拟考…

线性代数——(期末突击)概率统计习题(概率的性质、全概率公式)

目录 概率的性质 题一 全概率公式 题二 题三 概率的性质 有限可加性&#xff1a; 若有限个事件互不相容&#xff0c;则 单调性&#xff1a; 互补性&#xff1a; 加法公式&#xff1a; 可分性&#xff1a; 题一 在某城市中共发行三种报纸&#xff1a;甲、乙、丙。在这个…

Flutter之运行错误:Error: Member notfound: ‘SystemChrome .setEnabledSystemuIOverlays‘

项目由于引入的包导致报错&#xff1a; Error: Member notfound: SystemChrome .setEnabledSystemuIOverlays 主要原因是因为包里的方法有变动。 解决办法&#xff1a; 将AppDate\Local\Pub\Cache\hosted\pub.dev\r_scan-0.1.61\lib\src\r_scan_view.dart文件中的 原方法&am…

设计模式——1_4 外观(Facade)

文章目录 定义图纸一个例子&#xff1a;自动生成一杯茶沏茶的流程组合方式一&#xff1a;直接组合方法二&#xff1a;外观 碎碎念多个外观对象外观和封装外观和单例姑妄言之 定义 为子系统中的一组接口提供一个一致的界面&#xff0c;外观模式定义了一个高层接口&#xff0c;这…

【120版本】最新谷歌浏览器驱动下载地址

在使用selenium时可能会遇到谷歌浏览器和谷歌驱动器版本不一致的问题&#xff0c;并且国内可以搜到的谷歌浏览器下载地址里面最新的驱动器只有114版本的&#xff0c;但目前谷歌浏览器最新版本是120。所以这里记录下最新版本120谷歌驱动器下载地址&#xff1a; Chrome for Test…

Dobbo---分布式系统通信方式

通信方式 分布式系统通信方式1. RMIRMI 通信实现案例2. RPC常用RPC框架 分布式系统通信方式 1. RMI RMI ( Remote Method Invocation 远程方法调用) 图1.1 客户端-服务端通信方式 客户端将要调用的方法及参数&#xff0c;打包为辅助对象&#xff0c;通过网络socket&#xff…

【自控实验】3. 带有饱和非线性环节控制系统相平面分析

本科课程实验报告&#xff0c;有太多公式和图片了&#xff0c;干脆直接转成图片了 仅分享和记录&#xff0c;不保证全对 实验内容&#xff1a; 有无非线性环节的相轨迹对比&#xff0c;并求超调量。 在输入单位阶跃信号Xsr时&#xff0c;用示波器观察和记录系统输入饱和非线…

Hadoop-HA高可用

一、集群规划 二、HDFS高可用 官方地址 在opt目录下创建一个ha文件夹&#xff0c;将/opt/module/下的 hadoop-3.1.3拷贝到/opt/ha目录下&#xff08;记得删除data 和 log目录&#xff09; 配置core-site.xml hdfs-site.xml <configuration><!-- NameNode数据存…

个人网站制作 Part 4 添加响应式设计 | Web开发项目

文章目录 &#x1f469;‍&#x1f4bb; 基础Web开发练手项目系列&#xff1a;个人网站制作&#x1f680; 添加响应式设计&#x1f528;移动优先的响应式样式&#x1f527;步骤 1: 添加媒体查询 &#x1f528;图片和布局调整&#x1f527;步骤 2: 使用响应式图片&#x1f527;步…

如何使用网络测试仪构造特殊流量

为什么要仿真特殊流量 在现网中&#xff0c;网络流量时常伴随着突发&#xff0c;突发流量可能会造成网络的拥塞&#xff0c;从而产生丢包、抖动和时延&#xff0c;导致网络服务质量整体下降。面对宏观上的突发&#xff0c;通常采用在网络设备入向限速或者流量整形功能来消除突…

使用代理IP池实现多线程爬虫的方法

目录 前言 代理IP的概念和作用 为什么使用代理IP池 代理IP池的实现步骤 代码实现 注意事项 总结 前言 随着互联网的发展&#xff0c;爬虫技术在各个领域中被广泛应用。然而&#xff0c;目标网站对爬虫的限制也日益严格&#xff0c;例如限制单个IP的请求频率。为了解决这…

从0到1:如何建立一个大规模多语言代码生成预训练模型

国产AI辅助编程工具 CodeGeeX 是一个使用AI大模型为基座的辅助编程工具&#xff0c;帮助开发人员更快的编写代码。可以自动完成整个函数的编写&#xff0c;只需要根据注释或Tab按键即可。它已经在Java、JavaScript和Python等二十多种语言上进行了训练&#xff0c;并基于大量公开…

三轴加速度计LIS2DW12开发(3)----检测活动和静止状态

e2studio开发三轴加速度计LIS2DW12.3--检测活动和静止状态 概述视频教学样品申请源码下载新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e2studio的重定向printf设置R_SCI_UART_Open()函数原型回调函数user_uart_callback ()…

mongoose6.0版以上操作mongodb数据库的基本使用

1、介绍 Mongoose 是一个对象文档模型库&#xff0c;官网 http://www.mongoosejs.net/ 2、作用 方便使用代码操作 mongodb 数据库 3、使用流程 3.1、链接数据库 //1. 安装 mongoose---> npm install mongoose --save//2. 导入 mongoose const mongoose require(&quo…

航模遥控开关电路图大全

航模遥控开关电路图&#xff08;一&#xff09;&#xff1a;单通道航模遥控器的构造 遥控装置一般应用于车模、航模等领域&#xff0c;用以实现对靶机、航模、玩具等的自动控制。下面介绍一种无线比例电机遥控器的制作方法。它选用易购元件&#xff0c;具有原理简单、性能可靠…

28 星际旋转

效果演示 实现了一个太阳系动画&#xff0c;其中包括了地球、火星、金星、土星、水星、天王星、海王星以及火卫二号等行星的动画效果。太阳系的行星都被放在一个固定的容器中&#xff0c;并使用CSS动画来实现旋转和移动的效果。当太阳系的行星绕着太阳运行时&#xff0c;它们会…