在项目中我想使用了iconfont的图标做个图标选择器，效果如下。
（一）iconfont的引入工程
（二）iconfont图标class名的遍历
（三）图标选择器的制作
image.png
（一）iconfont图标选择则，引入vue工程
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。地址：https://www.iconfont.cn/
image.png
将图标库的图标加入购物车
image.png
打开购物车点击下载代码
image.png
将压缩包里的这几个文件放到工程里
image.png
<i class="iconfont icon-changjingguanli"></i>
就可以使用
（二）遍历iconfont图标class名
因为我们引用的iconfont的图标，使用的时候，我们需要知道，引用图标的class名字，一个个复制太麻烦，所以我将css文件里的内容读取后，进行正则筛选，然后遍历出来，效果如下
image.png
##html部分
##file类型的input框用来读取文件
<input type="file" class="file">
##button控制事件
<el-button size="small" @click="readFile">读取</el-button>
readFile() {
let fileselect = document.querySelector('input[type=file]').files[0];
//找到文件上传的元素
let reader = new FileReader()
if (typeof FileReader === 'undefined') {
alert('您的浏览器不支持FileReader接口');
}
reader.readAsText(fileselect, 'gb2312')
//注意读取中文的是用这个编码，不是utf-8
reader.onload = function () {
let iconCss = reader.result;
let iconList = [];
var reg = /(icon\-.*)\:before/g;
//筛选icon-开头:before结尾的字符串 期中/(icon\-.*)代表icon-加任意字符的分组
let resultS;
while ((resultS = reg.exec(iconCss)) != null) {
//遍历出分组的数据是我们需要的
iconList.push("iconfont " +resultS[1]);
//我们需要的格式
}
console.log(iconList);
}
（三）图标选择器
制作一个图标选择器，效果如下，使用了elementui的input组件与popover组件
image.png
html部分
<el-input placeholder="选择图标">
<template slot="prepend"><i :class="input3"></i></template>
<el-popover placement="right" width="300" trigger="click" slot="append" >
<el-row>
<el-col v-for="(item,index) in cities" :key=index :span="6">
<el-button :icon="item" @click="selectIcon(item)"></el-button>
</el-col>
</el-row>
<el-button slot="reference">选择</el-button>
</el-popover>
</el-input>
数据部分
这里的数据是遍历iconfont图标class名得到的iconfontclass名
data() {
return {
cities:["iconfont icon-changjingguanli", "iconfont icon-guanlianshebei", "iconfont icon-guanfangbanben", "iconfont icon-gongnengdingyi", "iconfont icon-jichuguanli", "iconfont icon-ceshishenqing", "iconfont icon-shujukanban", "iconfont icon-yingyongguanli", "iconfont icon-zhanghaoquanxianguanli", "iconfont icon-yuanquyunwei", "iconfont icon-jizhanguanli", "iconfont icon-zidingyi", "iconfont icon-qichedingwei", "iconfont icon-chengshi", "iconfont icon-yijiankaiguan", "iconfont icon-yingjian", "iconfont icon-ranqixieloubaojingqi", "iconfont icon-zhinengxiaofangshuan", "iconfont icon-zhunbeiliangchan", "iconfont icon-shebeikaifa"],
value: '',
input3: '',
}
},
js部分
selectIcon(city) {
this.input3 = city;
},
