乐趣区

elementiconfont-实现iconPicker组件

jiezi

在做后台管理项目的时候，有一个功能是侧边栏可配置。可配置项有：名字、路由、图标、权限。其中名字、路由、权限在大神的 vue-element-admin 中已经有很详细的介绍了，问题就在于 icon 选择配置（这个做完之后，发现不是很有必要，因为这个项目就内部人员在用，配图表手动输入 class 名就 ok 了），具体方案是用 element-ui 的 select 组件自定义模板实现 icon 可视化选择。

功能实现第一步，搜索引擎大法，用 baidu、google 分别搜索了关键词 iconpicker，一大堆搜索结果，有 bootstrap 的，有 layui 的，有 jquery 的。
但他们的 icon 都是固定的库，不能自己去增删改。而且项目中这几个框架都没有引入，为了一个功能去引入一个库感觉有点不划算（库的 OS：谁稀罕你用似的）。

搜索无果后，决定自己动手做一个组件，然后先列出自己想要的几个关键点

icon 可维护
增删 icon 简单
图形化选择

为了后期 icon 的维护（认真思考后感觉又是一个不是必要的选项）选择了用 iconfont，能随时添加删除 icon。
然后图形化选择的话，用 element-ui 自带的 select 组件就行了
但问题关键在于将 iconfont 引入项目
项目引入，直接将 iconfont 项目下载下来，放到 /src/assets/font 文件夹中

文件倒是放到本地了，但问题是我如何知道我引入了哪些 icon，以及将 icon 的 class 名输出到一个数组里，并在项目中可用。
手动粘贴复制倒是可以，但下次再增删几个 icon 还要一一对比吗？所以条路肯定不行了。
现在就是要读去 iconfont.css 中的内容，并将其中的所以 class 提取出来

第一个我能想到的方法就是，在 vue.config.js 中使用 node.js 的 api 将 iconfont.css 的文件内容读取出来。

const path = require('path')
const rf = require('fs')
function resolve (dir) {return path.join(__dirname, dir)
}
rf.readFile(resolve('src/assets/font/iconfont.css'), 'utf-8', function (err, data) {if (err) {console.log('error')
    return false
  } else {console.log(data)
})

代码确实输出了 iconfont.css 中的所有内容

然后我需要对这个 data 进行处理，输出一个数组

const res = data.match(/.iconfont*.+:before/g)

提取出 icon 名，在输出到一个变量中，但问题是从 vue.config.js 将变量输出到哪去，才能在整个项目中使用呢？localstorage 中？
而且在开发环境下能够使用 node.js 在生产环境可不行。
所以我采取了一个折中的方法，将这个变量输出到一个文件当中，然后文件中 export 这个变量


function replacer (match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return p2
}
rf.readFile(resolve('src/assets/font/iconfont.1.css'), 'utf-8', function (err, data) {if (err) {console.log('error')
    return false
  } else {const res = data.match(/.iconfont*.+:before/g)
    icondata = res.map(item => {return `'${item.replace(/(.iconfont-)(.*)(:before)/, replacer)}'`
    })
    icondata = `export default [${icondata.toString()}]`
    rf.writeFile(resolve('src/utils/icon.js'), icondata, (err) => {if (err) throw err
      console.log('The file has been saved!')
    })
  }
})

replacer 函数来源

接下来就是组件的代码了

<template>
  <el-select :value="icon" filterable placeholder="请选择" @change="handleChange">
    <el-option
      v-for="item in icons"
      :key="item"
      :label="item"
      :value="item">
      <span style="float: left"><i class="iconfont" :class="`iconfont-${item}`"></i></span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{item}}</span>
    </el-option>
  </el-select>
</template>
<script>
import icons from '@/utils/icon'
export default {
  props: {
    icon: {
      type: String,
      default: ""
    }
  },
  data () {
    return {icons,}
  },
  methods: {handleChange(val){this.$emit('update:icon',val)
    }
  },
}
</script>

// 调用
<icon-picker :icon.sync="icon" />
退出移动版