Vue Element前端應用開發(fā)之圖標的維護和使用

更新時間：2021年05月13日 09:32:55 作者：伍華聰

在Vue Element前端應用中，圖標是必不可少點綴界面的元素，Element界面組件里面提供了很多常見的圖標，因此考慮擴展更多圖標，引入了vue-awesome組件，它利用了Font Awesome的內(nèi)置圖標，實現(xiàn)了更多圖標的整合，可以在項目中使用更多的圖標元素了

概述

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

本篇隨筆先來上一個圖標管理的界面效果，然后在逐一進行介紹Element內(nèi)置圖標和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 官網(wǎng)查找到圖標名詞后，需要確認一下圖標集的名稱。比如，在500px這個圖標的詳情頁會有一個 URL 參數(shù)style=brands，故圖標名稱就是brands/500px。默認情況下，只能使用 FontAwesome 的免費圖標，另外由于solid樣式中的圖標最多，我們將其設為了默認圖標集，所以路徑前綴可以省略。當傳入null時，整個組件將不會渲染。

scale: number|string

用來調(diào)整圖標尺寸，默認值為1。

spin: boolean

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

pulse: boolean

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

inverse: boolean

為true時圖標顏色將被設置為#fff。默認值為false。

flip: 'vertical'|'horizontal'|'both'

用來指定圖標是否需要翻轉(zhuǎn)。

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文件里面進行定義，然后全局統(tǒng)一加入即可。

使用上和其他的圖標沒有差異，只是名稱不同而已。

<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-的前綴即可構成所需列表的每項內(nèi)容。

而對于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的數(shù)組過濾，我們就可以獲得對應的Awesome圖標名稱了。

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

import elementIcons from './element-icons' // 引入Element圖標
import vueAwesomeIcons from './vue-awesome-icons' // 引入vue-awesome圖標

然后構造頁面的data數(shù)據(jù)，如下所示，其中searchForm 是用來承載查詢條件的。

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

然后增加幾個Computed函數(shù)，用來處理數(shù)據(jù)的過濾查詢等操作。

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里面，對常規(guī)的圖標進行生成處理即可。

methods: {
    generateElementIconCode(symbol) {
      return `<i class="el-icon-${symbol}" 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>

這樣就可以實現(xiàn)對應圖標的動態(tài)過濾和展示了。

以上就是Vue Element前端應用開發(fā)之圖標的維護和使用的詳細內(nèi)容，更多關于Vue Element之圖標的維護和使用的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Vue如何由本地js中存放的url地址獲取圖片
這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-09-09
關于el-table-column的formatter的使用及說明
這篇文章主要介紹了關于el-table-column的formatter的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3中的h函數(shù)及使用小結(jié)
這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-03-03
如何使用vue自定義指令構建拖放插件
這篇文章主要介紹了如何使用vue自定義指令構建拖放插件，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下
2021-04-04
ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
傳說中VUE的語法糖到底是做什么的
從接觸Vue我們就知道 v-model是實現(xiàn)數(shù)據(jù)雙向綁定的那他能實現(xiàn)綁定的原理到底是啥？最常見的語法糖 v-model，今天通過案例給大家詳細介紹下，需要的朋友參考下吧
2021-09-09
el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
這篇文章主要介紹了el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue組件庫Element-常見組件表格示例代碼
對于Element組件的使用,最主要的就是明確自己想要達到的效果,從官網(wǎng)中將對應代碼復制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧
2023-10-10
Vue.js計算屬性computed與watch（5）
這篇文章主要為大家詳細介紹了Vue.js計算屬性computed與watch,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
vue-cli axios請求方式及跨域處理問題
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2018-03-03