目錄概述1、Vue-Awesome的使用介紹2、導(dǎo)入Element 圖標(biāo)和Vue-Awesome圖標(biāo)概述

Vue-Awesome 是基于 Vue.js 的 SVG 圖標(biāo)組件，內(nèi)置圖標(biāo)來(lái)自 Font Awesome。

本篇隨筆先來(lái)上一個(gè)圖標(biāo)管理的界面效果，然后在逐一進(jìn)行介紹Element內(nèi)置圖標(biāo)和Vue-Awesome的圖標(biāo)吧。

Element圖標(biāo)管理界面如下：

基于Vue-Awesome的圖標(biāo)管理如下所示。

其中查詢(xún)提供了名稱(chēng)進(jìn)行圖標(biāo)查詢(xún)，以及限制一次性展示多少個(gè)，另外提供一個(gè)自定義顏色選項(xiàng)，從而可以改變圖標(biāo)的展示顏色。

1、Vue-Awesome的使用介紹

Vue-Awesome 的 npm的安裝命令如下所示：

npm install vue-awesome

安裝方式如下所示

import Vue from ’vue’/* 在下面兩種方式中任選一種 */// 僅引入用到的圖標(biāo)以減小打包體積import ’vue-awesome/icons/flag’// 或者在不關(guān)心打包體積時(shí)一次引入全部圖標(biāo)import ’vue-awesome/icons’/* 任選一種注冊(cè)組件的方式 */import Icon from ’vue-awesome/components/Icon’// 全局注冊(cè)（在 `main .js` 文件中）Vue.component(’v-icon’, Icon)// 或局部注冊(cè)（在組件文件中）export default { components: { ’v-icon’: Icon }}

界面使用代碼如下所示，詳細(xì)Demo可以參考https://justineo.github.io/vue-awesome/demo/了解。

<!-- 基礎(chǔ)用法 --><v-icon name='beer'/><!-- 添加選項(xiàng) --><v-icon name='sync' scale='2' spin/><v-icon name='comment' flip='horizontal'/><v-icon name='code-branch' label='Forked Repository'/><!-- 堆疊圖標(biāo) --><v-icon label='No Photos'> <v-icon name='camera'/> <v-icon name='ban' scale='2' /></v-icon>

Vue-Awesome圖標(biāo)提供了一些prop的屬性設(shè)置，參考下面列表所示。

name: string

圖標(biāo)名稱(chēng)。如果本組件沒(méi)有用作圖標(biāo)堆棧的容器，那么這個(gè)字段是必須的。所有合法的值都對(duì)應(yīng)于圖標(biāo)文件相對(duì)于icons目錄的路徑。請(qǐng)注意當(dāng)你在 FontAwesome 官網(wǎng)查找到圖標(biāo)名詞后，需要確認(rèn)一下圖標(biāo)集的名稱(chēng)。比如，在500px這個(gè)圖標(biāo)的詳情頁(yè)會(huì)有一個(gè) URL 參數(shù)style=brands，故圖標(biāo)名稱(chēng)就是brands/500px。默認(rèn)情況下，只能使用 FontAwesome 的免費(fèi)圖標(biāo)，另外由于solid樣式中的圖標(biāo)最多，我們將其設(shè)為了默認(rèn)圖標(biāo)集，所以路徑前綴可以省略。當(dāng)傳入null時(shí)，整個(gè)組件將不會(huì)渲染。

scale: number|string

用來(lái)調(diào)整圖標(biāo)尺寸，默認(rèn)值為1。

spin: boolean

用來(lái)指定圖標(biāo)是否需要旋轉(zhuǎn)。默認(rèn)值為false。（不能與pulse一同使用。）

pulse: boolean

用來(lái)指定圖標(biāo)是否有脈沖旋轉(zhuǎn)的效果。默認(rèn)值為false。（不能與spin一同使用。）

inverse: boolean

為true時(shí)圖標(biāo)顏色將被設(shè)置為#fff。默認(rèn)值為false。

flip: ’vertical’|’horizontal’|’both’

用來(lái)指定圖標(biāo)是否需要翻轉(zhuǎn)。

label: string

當(dāng)指定時(shí)會(huì)設(shè)置圖標(biāo)的aria-label。

title: string

為圖標(biāo)設(shè)置標(biāo)題。

另外，我們也可以注冊(cè)自定義圖標(biāo)，如下所示。

import Icon from ’vue-awesome/components/Icon’Icon.register({ baidu: { width: 23.868, height: 26, d: ’M3.613 13.701c2.827-.608 2.442-3.986 2.357-4.725-.138-1.139-1.477-3.128-3.296-2.971C.386 6.21.052 9.515.052 9.515c-.309 1.528.74 4.793 3.561 4.186zm3.002 5.875c-.083.238-.268.846-.107 1.375.315 1.187 1.346 1.24 1.346 1.24h1.48v-3.619H7.749c-.713.213-1.057.767-1.134 1.004zM8.86 8.035c1.562 0 2.823-1.797 2.823-4.019C11.683 1.796 10.421 0 8.86 0 7.301 0 6.036 1.796 6.036 4.016c0 2.222 1.265 4.019 2.824 4.019zm6.724.265c2.087.271 3.429-1.956 3.695-3.644.272-1.686-1.074-3.644-2.552-3.98-1.48-.339-3.329 2.032-3.497 3.578-.2 1.89.271 3.778 2.354 4.046zm5.114 9.923s-3.229-2.498-5.113-5.198c-2.555-3.981-6.185-2.361-7.399-.337-1.209 2.024-3.093 3.305-3.36 3.644-.271.334-3.9 2.293-3.095 5.871.806 3.576 3.635 3.508 3.635 3.508s2.085.205 4.504-.336c2.42-.537 4.503.134 4.503.134s5.652 1.893 7.199-1.751c1.545-3.645-.874-5.535-.874-5.535zm-9.671 5.423H7.352c-1.587-.316-2.219-1.4-2.299-1.584-.078-.188-.528-1.059-.29-2.539.686-2.219 2.642-2.379 2.642-2.379h1.956V14.74l1.666.025v8.881zm6.844-.025h-4.229c-1.639-.423-1.716-1.587-1.716-1.587v-4.677l1.716-.027v4.203c.104.447.661.529.661.529h1.742v-4.705h1.825v6.264zm5.986-12.486c0-.808-.671-3.239-3.159-3.239-2.492 0-2.825 2.295-2.825 3.917 0 1.548.131 3.71 3.227 3.641 3.096-.068 2.757-3.507 2.757-4.319z’ }})

如果你的 SVG 文件有多個(gè)路徑或多邊形，以及/或者你想預(yù)定義一些樣式，可以用如下方式進(jìn)行注冊(cè)：

路徑方式：

import Icon from ’vue-awesome/components/Icon’Icon.register({ webpack: { width: 1200, height: 1200, paths: [ {style: ’fill:#8ED6FB’,d: ’M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z’ }, {style: ’fill:#1C78C0’,d: ’M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z’ } ] }})

多邊形方式：

import Icon from ’vue-awesome/components/Icon’Icon.register({ vue: { width: 256, height: 221, polygons: [ {style: ’fill:#41B883’,points: ’0,0 128,220.8 256,0 204.8,0 128,132.48 50.56,0 0,0’ }, {style: ’fill:#35495E’,points: ’50.56,0 128,133.12 204.8,0 157.44,0 128,51.2 97.92,0 50.56,0’ } ] }})

對(duì)于自定義的這些圖標(biāo)，我們可以把它們一起放在一個(gè)獨(dú)立的JS文件里面進(jìn)行定義，然后全局統(tǒng)一加入即可。

使用上和其他的圖標(biāo)沒(méi)有差異，只是名稱(chēng)不同而已。

<div style='height:100px;padding:10px'> <span>vue-Awesome 自定義圖標(biāo):(在utils/awesome-icon-customed.js中引入)</span> <v-icon name='baidu' scale='2' : /> <v-icon name='vue' scale='2' /> <v-icon name='webpack' scale='2' spin /> <v-icon name='html5-c' scale='2' spin /> </div>2、導(dǎo)入Element 圖標(biāo)和Vue-Awesome圖標(biāo)

在我們進(jìn)行頁(yè)面管理的時(shí)候，我們需要提取Element 圖標(biāo)和Vue-Awesome圖標(biāo)，以便能夠進(jìn)行界面的展示處理。

Element圖標(biāo)，我們只需要在一個(gè)JS文件里面，包含它的名稱(chēng)進(jìn)去一個(gè)列表里面即可，如下定義所示。

const elementIcons = [ ’platform-eleme’, ’eleme’, ’delete-solid’, ’delete’, ..........]export default elementIcons

在其中錄入對(duì)應(yīng)Element的圖表名稱(chēng)，移除el-icon-的前綴即可構(gòu)成所需列表的每項(xiàng)內(nèi)容。

而對(duì)于Vue-Awesome圖標(biāo)，我們安裝對(duì)應(yīng)的組件后，它的圖標(biāo)資源肯定也一定下載下來(lái)了，我們找到對(duì)應(yīng)的node_modules 目錄下的文件就可以看到了，如下截圖所示。

可以看到它的每個(gè)圖標(biāo)對(duì)應(yīng)一個(gè)js文件，而且不同樣式還有不同的目錄的，我們只需要自動(dòng)加入對(duì)應(yīng)的文件名稱(chēng)即可。

定義一個(gè)js文件，如vue-awesome-icon.js，用來(lái)獲取對(duì)應(yīng)Awesome圖標(biāo)名稱(chēng)，如下邏輯所示

// Vue-Awesome圖標(biāo)自動(dòng)加入const req = require.context(’vue-awesome/icons’, true, /.js$/)const requireAll = requireContext => requireContext.keys()const re = /./(.*).js/const vueAwesomeIcons = requireAll(req).filter((key) => { return key.indexOf(’index.js’) < 0}).map(i => { return i.match(re)[1]})export default vueAwesomeIcons

通過(guò)require.context 的操作以及僅需filter的數(shù)組過(guò)濾，我們就可以獲得對(duì)應(yīng)的Awesome圖標(biāo)名稱(chēng)了。

在管理頁(yè)面里面，我們需要引入Element和Vue-Awesome的圖標(biāo)管理文件，如下所示。

import elementIcons from ’./element-icons’ // 引入Element圖標(biāo)import vueAwesomeIcons from ’./vue-awesome-icons’ // 引入vue-awesome圖標(biāo)

然后構(gòu)造頁(yè)面的data數(shù)據(jù)，如下所示，其中searchForm 是用來(lái)承載查詢(xún)條件的。

export default { name: ’Icons’, data() { return { // 查詢(xún)表單 searchForm: {label: ’’,pagesize: 50,color: ’#409EFF’ }, // 自定義svg圖標(biāo)集合 svgIcons, // element圖標(biāo)集合 elementIcons, // vueAwesome圖標(biāo)集合 vueAwesomeIcons } },

然后增加幾個(gè)Computed函數(shù)，用來(lái)處理數(shù)據(jù)的過(guò)濾查詢(xún)等操作。

computed: { iconStyle: function() { return { color: this.searchForm.color } }, elementIconsFiltered: function() { const that = this var list = that.elementIcons.filter(item => {return item.indexOf(that.searchForm.label) >= 0 }) if (that.searchForm.pagesize > 0) {return list.slice(0, that.searchForm.pagesize) } else {return list } }, vueAwesomeIconsFiltered: function() { const that = this var list = that.vueAwesomeIcons.filter(item => {return item.indexOf(that.searchForm.label) >= 0 }) if (that.searchForm.pagesize > 0) {return list.slice(0, that.searchForm.pagesize) } else {return list } } },

然后在method里面，對(duì)常規(guī)的圖標(biāo)進(jìn)行生成處理即可。

methods: { generateElementIconCode(symbol) { return `<i />` }, generateAwesomeIconCode(symbol) { return `<v-icon name='${symbol}' />` }, handleClipboard(text, event) { if (text) {clipboard(text, event) } } }

對(duì)于界面的展示，我們以Vue-awesome圖標(biāo)展示為例介紹，如下所示。

<el-tab-pane label='Vue-Awesome 圖標(biāo)'><div v-for='item of vueAwesomeIconsFiltered' :key='item' @click='handleClipboard(generateAwesomeIconCode(item),$event)'> <el-tooltip placement='top'> <div slot='content'>{{ generateAwesomeIconCode(item) }}</div> <div class='icon-item'> <v-icon :name='item' scale='2' : /> <span>{{ item }}</span> </div> </el-tooltip></div> </el-tab-pane>

這樣就可以實(shí)現(xiàn)對(duì)應(yīng)圖標(biāo)的動(dòng)態(tài)過(guò)濾和展示了。

以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之圖標(biāo)的維護(hù)和使用的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之圖標(biāo)的維護(hù)和使用的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！