[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.hqwc.cn/news/411317.html

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

相关文章

国产阿里的Copilot能提效30%吗?

国产阿里的Copilot能提效30%吗&#xff1f; Copilot简介 GitHub 和 OpenAI 共同打造的一款编程神器–Copilot&#xff0c; 这是一款立足于人工智能技术的编程助手。在此基础上&#xff0c;借助于 GitHub 庞大的代码库和来自全球的开源社区帮助&#xff0c;搭配 OpenAI 在自然…

el-dialog嵌套使用,只显示遮罩层的问题

直接上解决方法 <!-- 错误写法 --><el-dialog><el-dialog></el-dialog></el-dialog><!-- 正确写法 --><el-dialog></el-dialog><el-dialog></el-dialog>我是不建议嵌套使用的&#xff0c;平级也能调用&#xff0c…

vite和webpack的区别和作用

前言 Vite 和 Webpack 都是现代化的前端构建工具&#xff0c;它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的&#xff0c;但它们在设计和实现方面有许多不同之处。 一、Vite详解和作用 vite 是什么 vite —— 一个由 vue 作者尤雨溪开发的 web 开发工…

Linux Centos7静默安装(非图形安装)Oracle RAC 11gR2(Oracle RAC 11.2.0.4)

Oracle RAC (全称Oracle Real Application Clusters &#xff09;静默安装&#xff08;非图形安装&#xff09;教程。 由于这篇文章花费了我太多时间&#xff0c;设置了仅粉丝可见&#xff0c;见谅。 环境说明&#xff1a; 虚拟机软件&#xff1a;VMware Workstation 16 Pro…

【Docker】在Windows操作系统安装Docker前配置环境

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是《Docker容器》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对…

什么是区块链?

区块链 区块链 &#xff08;英语&#xff1a;blockchain&#xff09;是借由 密码学 与 共识机制 等技术建立&#xff0c;存储数据的 保证不可篡改和不可伪造的 分布式技术。 什么是区块 区块 就是将一批数据打包在一起&#xff0c;并且给打包出来的区块编号。第一个区块的编…

基于ant design的权限管理系统设计与实现

业务系统中权限是基础设施&#xff0c;本文将使用ant design来开发前端管理系统&#xff0c;后端接口使用Spring Cloud开发。废话不多说&#xff0c;开搞。 实现效果图 权限 资源 角色 用户 ant design实现中遇到的问题 角色编辑时&#xff0c;资源权限的组合比较复杂&#…

工业企业能源管理平台,可以帮助企业解决哪些方面的能源问题?

随着全球工业化进程的加快&#xff0c;工业企业在生产经营过程中消耗的能源也越来越庞大。能源成本的上升和环境保护的压力使得工业企业对能源管理的重要性有了深刻的认识。为了提高能源利用效率、降低能源消耗、减少环境污染&#xff0c;工业企业在能源管理方面迫切需要一套规…

C# dataGridView 列的勾选框改变事件

dataGridView 增加一列 DataGridViewCheckBoxColumn 然后设置复选框值如下图&#xff1a; dataGridView增加两个事件 private void dataGridView1_CurrentCellDirtyStateChanged(object sender, EventArgs e){//提交改变&#xff0c;触发dataGridView1_CellValueChanged事件&…

MySQL三大日志

1. redo log 1.1 特点 InnoDB存储引擎独有物理日志&#xff0c;记录在数据页上做的修改让MySQL拥有了崩溃恢复能力&#xff0c;保证事务的持久性 1.2 刷盘时机 事务提交时log buffer 空间使用大约一半时事务日志缓冲区满InnoDB 定期执行检查点Checkpoint后台刷新线程&#…

postgresql迁移到mysql

1.工具方法&#xff1a;Navicat Premium16 2. 手工方法&#xff1a; 迁移流程 下面是将 Postgresql 数据库迁移到 MySQL 的步骤流程&#xff1a; 步骤描述1. 创建MySQL表结构在MySQL中创建与Postgresql中的表结构相同的表2. 导出Postgresql数据将Postgresql中的数据导出为SQ…

物联网与智慧城市的无界未来:如何打破传统束缚,开启智能生活新篇章

目录 一、物联网&#xff1a;连接万物的技术革命 1、物联网的发展历程 2、物联网的核心技术 二、智慧城市&#xff1a;未来城市的蓝图与挑战 1、智慧城市的蓝图 2、智慧城市建设面临的挑战 3、应对挑战的措施 三、物联网与智慧城市的融合&#xff1a;打破传统束缚&…