element+iconfont 实现iconPicker组件

tianhang 发布于2019-08-23 17:05 / 2224人阅读

摘要：在做后台管理项目的时候，有一个功能是侧边栏可配置。功能实现第一步，搜索引擎大法，用分别搜索了关键词，一大堆搜索结果，有的，有的，有的。现在就是要读去中的内容，并将其中的所以提取出来第一个我能想到的方法就是，在中使用的将的文件内容读取出来。

在做后台管理项目的时候，有一个功能是侧边栏可配置。可配置项有：名字、路由、图标、权限。其中名字、路由、权限在大神的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 函数来源

接下来就是组件的代码了




// 调用

GPU服务器私有云 element-ui dialog组件 iconPicker iconfont iconfont cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103794.html

vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

melody_lql 2019-08-02 16:00 评论0 收藏0
vue 项目总结一组件开发的配置和例子

摘要：入口文件，影响全局，作用是引入全局使用的库公共的样式和方法设置路由等。项目里总会有一些复用的组件，例如弹出框发送手机验证码图片上传等，将它们作为通用组件，避免重复工作结构如下可以根据功能模块建立文件夹，放置本功能会用到的通用组件。上一篇文章 https://segmentfault.com/a/11... 介绍了项目里文件夹的分类和作用，这次主要说明 src 文件夹里具体的文件分类和...

isaced 2019-08-22 11:16 评论0 收藏0
Icon 进化史

摘要：但它仍有缺陷字体需要加载资源有时候可能会出现锯齿只能被渲染成单色或者的渐变色所以我们要继续进化。直立人之使用，这里所谓的进化并不是本身的进化，因为并不晚于。随着外界因素的进化，的淘汰，的开始，的机会变到来了。南方古猿之 png sprite showImg(https://segmentfault.com/img/remote/1460000008199114?w=822&h=288...

superw 2019-08-20 13:57 评论0 收藏0
基于Vue.js 2.x系列 + Element UI + RBAC/AUTH权限的响应式后台管理

摘要：增加文件上传插件，主要用于管理后台的资源，之前我们运营是每次都要去上传文件，而有了这个插件管理，就可以不用上传重复的资源。现目前上传的文件没有用数据库来管理，而是直接用获取文件的形式，也是偷懒，有时间再实现吧。项目全面更新 https://segmentfault.com/a/11... 前言项目前端地址： https://github.com/lmxdawn/vu... 项目后...

AlexTuan 2019-06-28 18:49 评论0 收藏0