資訊專欄INFORMATION COLUMN
摘要：在做后臺(tái)管理項(xiàng)目的時(shí)候，有一個(gè)功能是側(cè)邊欄可配置。功能實(shí)現(xiàn)第一步，搜索引擎大法，用分別搜索了關(guān)鍵詞，一大堆搜索結(jié)果，有的，有的，有的?，F(xiàn)在就是要讀去中的內(nèi)容，并將其中的所以提取出來(lái)第一個(gè)我能想到的方法就是，在中使用的將的文件內(nèi)容讀取出來(lái)。
在做后臺(tái)管理項(xiàng)目的時(shí)候，有一個(gè)功能是側(cè)邊欄可配置?？膳渲庙?xiàng)有：名字、路由、圖標(biāo)、權(quán)限。其中名字、路由、權(quán)限在大神的vue-element-admin中已經(jīng)有很詳細(xì)的介紹了，問(wèn)題就在于icon選擇配置（這個(gè)做完之后，發(fā)現(xiàn)不是很有必要，因?yàn)檫@個(gè)項(xiàng)目就內(nèi)部人員在用，配圖表手動(dòng)輸入class名就ok了），具體方案是用element-ui的select組件自定義模板實(shí)現(xiàn)icon可視化選擇。
功能實(shí)現(xiàn)第一步，搜索引擎大法，用baidu、google分別搜索了關(guān)鍵詞iconpicker，一大堆搜索結(jié)果，有bootstrap的，有l(wèi)ayui的，有jquery的。
但他們的icon都是固定的庫(kù)，不能自己去增刪改。而且項(xiàng)目中這幾個(gè)框架都沒(méi)有引入，為了一個(gè)功能去引入一個(gè)庫(kù)感覺(jué)有點(diǎn)不劃算（庫(kù)的OS：誰(shuí)稀罕你用似的）。
搜索無(wú)果后，決定自己動(dòng)手做一個(gè)組件，然后先列出自己想要的幾個(gè)關(guān)鍵點(diǎn)
icon可維護(hù)
增刪icon簡(jiǎn)單
圖形化選擇
為了后期icon的維護(hù)（認(rèn)真思考后感覺(jué)又是一個(gè)不是必要的選項(xiàng)）選擇了用iconfont，能隨時(shí)添加刪除icon。
然后圖形化選擇的話，用element-ui自帶的select組件就行了
但問(wèn)題關(guān)鍵在于將iconfont 引入項(xiàng)目
項(xiàng)目引入，直接將iconfont項(xiàng)目下載下來(lái)，放到/src/assets/font文件夾中
文件倒是放到本地了，但問(wèn)題是我如何知道我引入了哪些icon，以及將icon的class名輸出到一個(gè)數(shù)組里，并在項(xiàng)目中可用。
手動(dòng)粘貼復(fù)制倒是可以，但下次再增刪幾個(gè)icon 還要一一對(duì)比嗎？所以條路肯定不行了。
現(xiàn)在就是要讀去iconfont.css中的內(nèi)容，并將其中的所以class提取出來(lái)
第一個(gè)我能想到的方法就是，在vue.config.js中使用node.js的api將iconfont.css的文件內(nèi)容讀取出來(lái)。
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)
})
代碼確實(shí)輸出了iconfont.css中的所有內(nèi)容
然后我需要對(duì)這個(gè)data進(jìn)行處理，輸出一個(gè)數(shù)組
const res = data.match(/.iconfont*.+:before/g)
提取出icon名，在輸出到一個(gè)變量中，但問(wèn)題是從vue.config.js將變量輸出到哪去，才能在整個(gè)項(xiàng)目中使用呢？localstorage中？
而且在開發(fā)環(huán)境下能夠使用node.js 在生產(chǎn)環(huán)境可不行。
所以我采取了一個(gè)折中的方法，將這個(gè)變量輸出到一個(gè)文件當(dāng)中，然后文件中export 這個(gè)變量
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ù)來(lái)源
接下來(lái)就是組件的代碼了
// 調(diào)用 {{ item }}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103794.html
摘要：入口文件，影響全局，作用是引入全局使用的庫(kù)公共的樣式和方法設(shè)置路由等。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框發(fā)送手機(jī)驗(yàn)證碼圖片上傳等，將它們作為通用組件，避免重復(fù)工作結(jié)構(gòu)如下可以根據(jù)功能模塊建立文件夾，放置本功能會(huì)用到的通用組件。 上一篇文章 https://segmentfault.com/a/11... 介紹了項(xiàng)目里文件夾的分類和作用，這次主要說(shuō)明 src 文件夾里具體的文件分類和...
摘要：入口文件，影響全局，作用是引入全局使用的庫(kù)公共的樣式和方法設(shè)置路由等。項(xiàng)目里總會(huì)有一些復(fù)用的組件，例如彈出框發(fā)送手機(jī)驗(yàn)證碼圖片上傳等，將它們作為通用組件，避免重復(fù)工作結(jié)構(gòu)如下可以根據(jù)功能模塊建立文件夾，放置本功能會(huì)用到的通用組件。 上一篇文章 https://segmentfault.com/a/11... 介紹了項(xiàng)目里文件夾的分類和作用，這次主要說(shuō)明 src 文件夾里具體的文件分類和...
摘要：但它仍有缺陷字體需要加載資源有時(shí)候可能會(huì)出現(xiàn)鋸齒只能被渲染成單色或者的漸變色所以我們要繼續(xù)進(jìn)化。直立人之使用，這里所謂的進(jìn)化并不是本身的進(jìn)化，因?yàn)椴⒉煌碛?。隨著外界因素的進(jìn)化，的淘汰，的開始，的機(jī)會(huì)變到來(lái)了。 南方古猿之 png sprite showImg(https://segmentfault.com/img/remote/1460000008199114?w=822&h=288...
摘要：增加文件上傳插件，主要用于管理后臺(tái)的資源，之前我們運(yùn)營(yíng)是每次都要去上傳文件，而有了這個(gè)插件管理，就可以不用上傳重復(fù)的資源。現(xiàn)目前上傳的文件沒(méi)有用數(shù)據(jù)庫(kù)來(lái)管理，而是直接用獲取文件的形式，也是偷懶，有時(shí)間再實(shí)現(xiàn)吧。 項(xiàng)目全面更新 https://segmentfault.com/a/11... 前言 項(xiàng)目前端地址： https://github.com/lmxdawn/vu... 項(xiàng)目后...
閱讀 1458·2021-09-02 19:23
閱讀 1607·2021-08-11 11:19
閱讀 652·2019-08-30 15:55
閱讀 1663·2019-08-30 12:50
閱讀 2252·2019-08-30 11:23
閱讀 2191·2019-08-29 13:13
閱讀 1511·2019-08-28 18:13
閱讀 3350·2019-08-26 11:53
