Vue图标选择器及Iconfont使用

在项目中我想使用了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;
    },