记录一次在Vue中动态使用阿里巴巴矢量图标库
这是本人第一次使用阿里巴巴的矢量图标库,简单的导入和使用的话网上的教程很多,这里不多赘述,本人的需求是从数据库中加载出来并且显示到页面上,接下来简述一下如何实现。
以下代码均是本人实际推敲、测试可用后写出来的,请放心食用。
前言
阿里巴巴矢量图标库(以下简称阿里巴巴图标)针对每一个图标提供了三种编码方式,分别是Unicode
、Font class
、Symbol
。它们的名称特点如下:
方式一 | 动态加载Unicode
编码
如上图所示:Unicode图标的名字是以&
开头;
结尾的一个编码,在阿里巴巴的官方教程中它的使用如下:
官方写法:
<i class="iconfont"></i>
错误写法:针对这种编码方式的动态加载,我在网上并没有找到可用的教程。不过我的理解很简单,标签里面的class="iconfont"
写死,标签中间写上它的编码就可以。我最初的想法很简单,用插值表达式嘛,所以代码如下(失败了):
<i class="iconfont">{{item.icon}}</i>
上面的代码仅仅是将数据库中的一段显示的放在了前端,效果嘛,本来该出现图标的位置出现的是

这一串字符。
正确写法:稍作思考后,我想到了HTML中常用的空格,也就是
等。我觉得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>
数据库中存储数据与显示效果如下所示: