element+iconfont 實現(xiàn)iconPicker組件

tianhang 發(fā)布于2019-08-23 17:05 / 2345人閱讀

摘要：在做后臺管理項目的時候，有一個功能是側邊欄可配置。功能實現(xiàn)第一步，搜索引擎大法，用分別搜索了關鍵詞，一大堆搜索結果，有的，有的，有的。現(xiàn)在就是要讀去中的內容，并將其中的所以提取出來第一個我能想到的方法就是，在中使用的將的文件內容讀取出來。

在做后臺管理項目的時候，有一個功能是側邊欄可配置。可配置項有：名字、路由、圖標、權限。其中名字、路由、權限在大神的vue-element-admin中已經有很詳細的介紹了，問題就在于icon選擇配置（這個做完之后，發(fā)現(xiàn)不是很有必要，因為這個項目就內部人員在用，配圖表手動輸入class名就ok了），具體方案是用element-ui的select組件自定義模板實現(xiàn)icon可視化選擇。

功能實現(xiàn)第一步，搜索引擎大法，用baidu、google分別搜索了關鍵詞iconpicker，一大堆搜索結果，有bootstrap的，有l(wèi)ayui的，有jquery的。
但他們的icon都是固定的庫，不能自己去增刪改。而且項目中這幾個框架都沒有引入，為了一個功能去引入一個庫感覺有點不劃算（庫的OS：誰稀罕你用似的）。

搜索無果后，決定自己動手做一個組件，然后先列出自己想要的幾個關鍵點

icon可維護
增刪icon簡單
圖形化選擇

為了后期icon的維護（認真思考后感覺又是一個不是必要的選項）選擇了用iconfont，能隨時添加刪除icon。
然后圖形化選擇的話，用element-ui自帶的select組件就行了
但問題關鍵在于將iconfont 引入項目
項目引入，直接將iconfont項目下載下來，放到/src/assets/font文件夾中

文件倒是放到本地了，但問題是我如何知道我引入了哪些icon，以及將icon的class名輸出到一個數(shù)組里，并在項目中可用。
手動粘貼復制倒是可以，但下次再增刪幾個icon 還要一一對比嗎？所以條路肯定不行了。
現(xiàn)在就是要讀去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進行處理，輸出一個數(shù)組

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

提取出icon名，在輸出到一個變量中，但問題是從vue.config.js將變量輸出到哪去，才能在整個項目中使用呢？localstorage中？
而且在開發(fā)環(huán)境下能夠使用node.js 在生產環(huán)境可不行。
所以我采取了一個折中的方法，將這個變量輸出到一個文件當中，然后文件中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 函數(shù)來源

接下來就是組件的代碼了




// 調用

云服務器 GPU云服務器 element-ui dialog組件 iconPicker iconfont iconfont cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103794.html

vue 項目總結一組件開發(fā)的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發(fā)送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據(jù)功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

melody_lql 2019-08-02 16:00 評論0 收藏0
vue 項目總結一組件開發(fā)的配置和例子

摘要：入口文件，影響全局，作用是引入全局使用的庫公共的樣式和方法設置路由等。項目里總會有一些復用的組件，例如彈出框發(fā)送手機驗證碼圖片上傳等，將它們作為通用組件，避免重復工作結構如下可以根據(jù)功能模塊建立文件夾，放置本功能會用到的通用組件。上一篇文章 https://segmentfault.com/a/11... 介紹了項目里文件夾的分類和作用，這次主要說明 src 文件夾里具體的文件分類和...

isaced 2019-08-22 11:16 評論0 收藏0
Icon 進化史

摘要：但它仍有缺陷字體需要加載資源有時候可能會出現(xiàn)鋸齒只能被渲染成單色或者的漸變色所以我們要繼續(xù)進化。直立人之使用，這里所謂的進化并不是本身的進化，因為并不晚于。隨著外界因素的進化，的淘汰，的開始，的機會變到來了。南方古猿之 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權限的響應式后臺管理

摘要：增加文件上傳插件，主要用于管理后臺的資源，之前我們運營是每次都要去上傳文件，而有了這個插件管理，就可以不用上傳重復的資源。現(xiàn)目前上傳的文件沒有用數(shù)據(jù)庫來管理，而是直接用獲取文件的形式，也是偷懶，有時間再實現(xiàn)吧。項目全面更新 https://segmentfault.com/a/11... 前言項目前端地址： https://github.com/lmxdawn/vu... 項目后...

AlexTuan 2019-06-28 18:49 評論0 收藏0