在VUE+Element 前端應用中，圖示是必不可少點綴界面的元素，因此整合一些常用的圖示是非常必要的，還好Element界面組件里面提供了很多常見的圖示，不過數量不是很多，應該是300個左右吧，因此考慮擴展更多圖示，我引入了vue-awesome組件，它利用了Font Awesome的內置圖示，實作了更多圖示的整合，可以在專案中使用更多的圖示元素了，另外在本隨筆的圖示管理中，提供了對圖示名稱進行搜索，并根據圖示顏色樣式生成對應圖示的代碼，非常方便使用，
Vue-Awesome 是基于 Vue.js 的 SVG 圖示組件，內置圖示來自 Font Awesome，
本篇隨筆先來上一個圖示管理的界面效果，然后在逐一進行介紹Element內置圖示和Vue-Awesome的圖示吧，
Element圖示管理界面如下：
基于Vue-Awesome的圖示管理如下所示，
其中查詢提供了名稱進行圖示查詢，以及限制一次性展示多少個，另外提供一個自定義顏色選項，從而可以改變圖示的展示顏色，
1、Vue-Awesome的使用介紹
Vue-Awesome 的 npm的安裝命令如下所示：
npm install vue-awesome
安裝方式如下所示
import Vue from 'vue' /* 在下面兩種方式中任選一種 */ // 僅引入用到的圖示以減小打包體積 import 'vue-awesome/icons/flag' // 或者在不關心打包體積時一次引入全部圖示 import 'vue-awesome/icons' /* 任選一種注冊組件的方式 */ import Icon from 'vue-awesome/components/Icon' // 全域注冊（在 `main .js` 檔案中） Vue.component('v-icon', Icon) // 或區域注冊（在組件檔案中） export default { components: { 'v-icon': Icon } }
界面使用代碼如下所示，詳細Demo可以參考https://justineo.github.io/vue-awesome/demo/ 了解，
<!-- 基礎用法 --> <v-icon name="beer"/> <!-- 添加選項 --> <v-icon name="sync" scale="2" spin/> <v-icon name="comment" flip="horizontal"/> <v-icon name="code-branch" label="Forked Repository"/> <!-- 堆疊圖示 --> <v-icon label="No Photos"> <v-icon name="camera"/> <v-icon name="ban" scale="2" class="alert"/> </v-icon>
Vue-Awesome圖示提供了一些prop的屬性設定，參考下面串列所示，
-
name: string圖示名稱，如果本組件沒有用作圖示堆疊的容器，那么這個欄位是必須的，所有合法的值都對應于圖示檔案相對于
icons目錄的路徑，請注意當你在 FontAwesome 官網查找到圖示名詞后，需要確認一下圖示集的名稱，比如，在500px這個圖示的詳情頁會有一個 URL 引數style=brands，故圖示名稱就是brands/500px，默認情況下，只能使用 FontAwesome 的免費圖示，另外由于
solid樣式中的圖示最多，我們將其設為了默認圖示集，所以路徑前綴可以省略，當傳入
null時，整個組件將不會渲染， -
scale: number|string用來調整圖示尺寸，默認值為
1， -
spin: boolean用來指定圖示是否需要旋轉，默認值為
false，（不能與pulse一同使用，） -
pulse: boolean用來指定圖示是否有脈沖旋轉的效果，默認值為
false，（不能與spin一同使用，） -
inverse: boolean為
true時圖示顏色將被設定為#fff，默認值為false， -
flip: 'vertical'|'horizontal'|'both'用來指定圖示是否需要翻轉，
-
label: string當指定時會設定圖示的
aria-label， -
title: string為圖示設定標題，
另外，我們也可以注冊自定義圖示，如下所示，
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 檔案有多個路徑或多邊形，以及/或者你想預定義一些樣式，可以用如下方式進行注冊：
路徑方式：
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' } ] } })
對于自定義的這些圖示，我們可以把它們一起放在一個獨立的JS檔案里面進行定義，然后全域統一加入即可，
使用上和其他的圖示沒有差異，只是名稱不同而已，
<div style="height:100px;padding:10px"> <span>vue-Awesome 自定義圖示:(在utils/awesome-icon-customed.js中引入)</span> <v-icon name="baidu" scale="2" :style="iconStyle" /> <v-icon name="vue" scale="2" /> <v-icon name="webpack" scale="2" spin /> <v-icon name="html5-c" scale="2" spin /> </div>
2、匯入Element 圖示和Vue-Awesome圖示
在我們進行頁面管理的時候，我們需要提取Element 圖示和Vue-Awesome圖示，以便能夠進行界面的展示處理，
Element圖示，我們只需要在一個JS檔案里面，包含它的名稱進去一個串列里面即可，如下定義所示，
const elementIcons = [ 'platform-eleme', 'eleme', 'delete-solid', 'delete', .......... ] export default elementIcons
在其中錄入對應Element的圖表名稱，移除el-icon-的前綴即可構成所需串列的每項內容，
而對于Vue-Awesome圖示，我們安裝對應的組件后，它的圖示資源肯定也一定下載下來了，我們找到對應的node_modules 目錄下的檔案就可以看到了，如下截圖所示，
可以看到它的每個圖示對應一個js檔案，而且不同樣式還有不同的目錄的，我們只需要自動加入對應的檔案名稱即可，
定義一個js檔案，如vue-awesome-icon.js，用來獲取對應Awesome圖示名稱，如下邏輯所示
// Vue-Awesome圖示自動加入 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
通過 require.context 的操作以及僅需filter的陣列過濾，我們就可以獲得對應的Awesome圖示名稱了，
在管理頁面里面，我們需要引入Element和Vue-Awesome的圖示管理檔案，如下所示，
import elementIcons from './element-icons' // 引入Element圖示 import vueAwesomeIcons from './vue-awesome-icons' // 引入vue-awesome圖示
然后構造頁面的data資料，如下所示，其中searchForm 是用來承載查詢條件的，
export default { name: 'Icons', data() { return { // 查詢表單 searchForm: { label: '', pagesize: 50, color: '#409EFF' }, // 自定義svg圖示集合 svgIcons, // element圖示集合 elementIcons, // vueAwesome圖示集合 vueAwesomeIcons } },
然后增加幾個Computed函式，用來處理資料的過濾查詢等操作，
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里面，對常規的圖示進行生成處理即可，
methods: { generateElementIconCode(symbol) { return `<i style="color:${this.searchForm.color};"/>` }, generateAwesomeIconCode(symbol) { return `<v-icon name="${symbol}" style="color:${this.searchForm.color};"/>` }, handleClipboard(text, event) { if (text) { clipboard(text, event) } } }
對于界面的展示，我們以Vue-awesome圖示展示為例介紹，如下所示，
<el-tab-pane label="Vue-Awesome 圖示"> <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" :style="iconStyle" /> <span>{{ item }}</span> </div> </el-tooltip> </div> </el-tab-pane>
這樣就可以實作對應圖示的動態過濾和展示了，
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進VUE+Element 前端應用開發(1）--- 開發環境的準備作業
循序漸進VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用
循序漸進VUE+Element 前端應用開發(3）--- 動態選單和路由的關聯處理
循序漸進VUE+Element 前端應用開發(4）--- 獲取后端資料及產品資訊頁面的處理
循序漸進VUE+Element 前端應用開發(5）--- 表格串列頁面的查詢，串列展示和欄位轉義處理
循序漸進VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用
循序漸進VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函式
循序漸進VUE+Element 前端應用開發(8）--- 樹串列組件的使用
循序漸進VUE+Element 前端應用開發(9）--- 界面語言國際化的處理
循序漸進VUE+Element 前端應用開發(10）--- 基于vue-echarts處理各種圖表展示
循序漸進VUE+Element 前端應用開發(11）--- 圖示的維護和使用
循序漸進VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登錄處理
循序漸進VUE+Element 前端應用開發(13）--- 前端API介面的封裝處理
循序漸進VUE+Element 前端應用開發(14）--- 根據ABP后端介面實作前端界面展示
循序漸進VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理
循序漸進VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理
循序漸進VUE+Element 前端應用開發(17）--- 選單管理
循序漸進VUE+Element 前端應用開發(18）--- 功能點管理及權限控制
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21638.html
標籤：Html/Css
上一篇：移動端布局