在項(xiàng)目中我想使用了iconfont的圖標(biāo)做個(gè)圖標(biāo)選擇器媳纬，效果如下。
（一）iconfont的引入工程
（二）iconfont圖標(biāo)class名的遍歷
（三）圖標(biāo)選擇器的制作
image.png
（一）iconfont圖標(biāo)選擇則乃戈，引入vue工程
Iconfont-國內(nèi)功能很強(qiáng)大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫,提供矢量圖標(biāo)下載蝴蜓、在線存儲(chǔ)、格式轉(zhuǎn)換等功能够颠。阿里巴巴體驗(yàn)團(tuán)隊(duì)傾力打造,設(shè)計(jì)和前端開發(fā)的便捷工具乔煞。地址：https://www.iconfont.cn/
image.png
將圖標(biāo)庫的圖標(biāo)加入購物車
image.png
打開購物車點(diǎn)擊下載代碼
image.png
將壓縮包里的這幾個(gè)文件放到工程里
image.png
<i class="iconfont icon-changjingguanli"></i>
就可以使用
（二）遍歷iconfont圖標(biāo)class名
因?yàn)槲覀円玫膇confont的圖標(biāo)吁朦，使用的時(shí)候，我們需要知道渡贾，引用圖標(biāo)的class名字喇完，一個(gè)個(gè)復(fù)制太麻煩，所以我將css文件里的內(nèi)容讀取后剥啤，進(jìn)行正則篩選锦溪，然后遍歷出來，效果如下
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')
//注意讀取中文的是用這個(gè)編碼府怯，不是utf-8
reader.onload = function () {
let iconCss = reader.result;
let iconList = [];
var reg = /(icon\-.*)\:before/g;
//篩選icon-開頭:before結(jié)尾的字符串 期中/(icon\-.*)代表icon-加任意字符的分組
let resultS;
while ((resultS = reg.exec(iconCss)) != null) {
//遍歷出分組的數(shù)據(jù)是我們需要的
iconList.push("iconfont " +resultS[1]);
//我們需要的格式
}
console.log(iconList);
}
（三）圖標(biāo)選擇器
制作一個(gè)圖標(biāo)選擇器刻诊，效果如下，使用了elementui的input組件與popover組件
image.png
html部分
<el-input placeholder="選擇圖標(biāo)">
<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>
數(shù)據(jù)部分
這里的數(shù)據(jù)是遍歷iconfont圖標(biāo)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;
},
