技術標籤：前端學習筆記vuesvgelementui

SVG格式圖片的配置

名詞解釋：

svg是可縮放向量圖形，顧名思義就是任意改變其大小也不會變形，基於可擴充套件標記語言（xml），他嚴格遵守XML語法，並用文字格式的描述性語言來描述影象內容。使用者可以直接用程式碼來描述影象，可以用任何文書處理工具開啟SVG影象。

圖片大致被分為向量圖和點陣圖兩種格式，向量圖用點和線來描述物體，所以檔案會比較小，同時也能提供高清晰的畫面，適合於直接列印或輸出，改變其大小圖不會變形；而點陣圖影象的儲存單位是影象上每一點的畫素值，因此一般的影象檔案都很大，會佔用大量的網路頻寬。SVG是一種向量圖形格式，GIF、JPEG，png等都是點陣圖，改變其尺寸大小影象會變形或會出現馬賽克模糊等情況。

svg格式的優勢：

1. 任意放縮

   使用者可以任意縮放影象顯示，而不會破壞影象的清晰度、細節等

2. 文字獨立

   SVG影象中的文字獨立於影象，文字保留可編輯和可搜尋的狀態。也不會再有字型的限制，使用者系統即使沒有安裝某一字型，也會看到和他們製作時完全相同的畫面。

3. 較小的檔案

   總體來講，SVG檔案比那些GIF和JPEG格式的檔案要小很多，因而下載也很快。

4. 超強顯示效果

   SVG影象在螢幕上總是邊緣清晰，它的清晰度適合任何螢幕分辨力和列印分辨力

5. 超級顏色控制

   SVG影象提供一個1 600萬種顏色的調色盤，支援ICC顏色描述檔案標準、RGB、線X填充、漸變和蒙版

ElementUI引入svg圖示

1. npm安裝外掛

通過npm install svg-sprite-loader 安裝svg外掛

2. 建立資料夾

在src下建立資料夾icons，icons檔案包括：svg資料夾和index.js檔案，其中svg資料夾下用來放svg格式的圖片

目錄如下：

• icons
  • svg
    • svg格式圖片.svg
  • index.js

3. 封裝svg-icon元件

在components資料夾中建SvgIcon資料夾，其中建立一個index.vue檔案

檔案內容：

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

</style>

 

• 檔案中主要的就是第3行 ，呼叫svg原始碼對資料進行處理展示成圖片

4. 全域性註冊svg元件

在剛才新建的icons資料夾下，新建index.js檔案

檔案內容：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

/*
require.context有三個引數：
directory：說明小組要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp：匹配檔案的正則表示式
*/
// 全域性註冊
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

• 第1,2行：引入要載入的檔案

• 第11行：全域性註冊svg-icon元件

• 第13行：

  • require.context函式用於建立自己的上下文

  • 它允許您傳遞要搜尋的目錄，指示是否也應搜尋子目錄的標誌以及用於匹配檔案的正則表示式

  • require.context共有三個引數：

    • 第一個：directory：說明小組要檢索的目錄
    • 第二個：useSubdirectories：是否檢索子目錄
    • 第三個：regExp：匹配檔案的正則表示式

  • （建立了）一個包含了 svg 資料夾（不包含子目錄）下面的、所有檔名以 .suv 結尾的、能被 require 請求到的檔案的上下文

  • 這個是webpack提供的require方法，可以建立上下文環境。相當於將svg目錄下的svg檔案require進來。

• 第15行：

  • 此處requireAll方法生成了一個類require方法，這個方法接收一個引數req，根據這個引數我們可以得到相應的模組資訊。 比如傳入svg目錄下的404.svg檔名，req(’./404.svg’)，就會返回相對應的模組。

• 第13-15行：就是一次性將svg資料夾下的.svg格式的檔案全部引入

5. 在main.js引入icons資料夾

在main.js中新增import ‘@/icons’

6. 配置配置檔案

在vue.config.js中新增配置

chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  },

• 第12-16行：新增要替換的loader

7. svg圖片的使用

完成以上操作就可以使用svg圖片了，此時只需將svg格式的圖片放到icons/svg資料夾中，然後在需要用的地方

<svg-icon icon-class="user" />

便可以在頁面上顯示出圖片，如圖所示：