正规的外贸网站建设公司,厦门优化网站,河南智能seo快速排名软件,南京seo优化推广记录一次在Vue中动态使用阿里巴巴矢量图标库 这是本人第一次使用阿里巴巴的矢量图标库#xff0c;简单的导入和使用的话网上的教程很多#xff0c;这里不多赘述#xff0c;本人的需求是从数据库中加载出来并且显示到页面上#xff0c;接下来简述一下如何实现。 以下代码均是…记录一次在Vue中动态使用阿里巴巴矢量图标库 这是本人第一次使用阿里巴巴的矢量图标库简单的导入和使用的话网上的教程很多这里不多赘述本人的需求是从数据库中加载出来并且显示到页面上接下来简述一下如何实现。 以下代码均是本人实际推敲、测试可用后写出来的请放心食用。 前言
阿里巴巴矢量图标库以下简称阿里巴巴图标针对每一个图标提供了三种编码方式分别是Unicode、Font class、Symbol。它们的名称特点如下 方式一 | 动态加载Unicode编码 如上图所示Unicode图标的名字是以开头;结尾的一个编码在阿里巴巴的官方教程中它的使用如下
官方写法
i classiconfont#xe600;/i错误写法针对这种编码方式的动态加载我在网上并没有找到可用的教程。不过我的理解很简单标签里面的classiconfont写死标签中间写上它的编码就可以。我最初的想法很简单用插值表达式嘛所以代码如下失败了
i classiconfont{{item.icon}}/i上面的代码仅仅是将数据库中的一段显示的放在了前端效果嘛本来该出现图标的位置出现的是#xe600;这一串字符。 正确写法稍作思考后我想到了HTML中常用的空格也就是nbsp;等。我觉得Unicode编码也许不能作为文本来处理应该用html来处理因此我们应该使用v-html来取代插值表达式代码如下
i classiconfont v-htmlitem.icon/i我在数据库中存储的数据如下显示效果如右侧所示 方式二 | 使用Font class的方式
其实Font class的图标我觉得更好用一些使用起来有点像是element-ui的图标官方教程如下。
官方写法
span classiconfont icon-sp-xxx/spanicon-sp-是我自己定义的前缀下载图标的时候可以设置。
这种写法很简单因此如果要从数据库中查出来显示到前端的话只要如下就可以注意空格
i :classiconfont item.icon/i相较于官方教程写死class这种方式只不过是给class绑定了一个字符串 空格 item很好理解不多赘述下面是我数据库中存储的数据与前端显示效果 记得存储的时候忽略最前面的.
第三种方式就省略吧因为针对于动态导入我们考虑的只有名字或者是编码而只看名字的话第二种种方式和第三种方式别无二致一样用吧。
拓展
当然了针对方式二稍作改变将iconfont icon-sp-shezhi这整个字段存储在数据库中然后前段代码如下也是可以显示的
i :classitem.icon/i数据库中存储数据与显示效果如下所示
