Vue.js 電商練習技術整理 -- 製作讀取動畫增加使用者體驗

文章目的

我們時常在逛其他網站時，讀取過程中會看到一些動畫呈現，此文章用來記錄在用 Vue 開發網站時，如何製作同樣的動畫效果。

方法簡介

套用 vue-loading-overlay 套件達到效果 — vue-loading-overlay官方文件
利用 FontAwesome 提供的 loading 圖案達到效果 —FontAwesome Loading

vue-loading-overlay

這是一個 vue 的套件，透過安裝此套件我們可以輕易地呈現 loading 效果。

vue-loading-overlay 安裝

這邊我們透過 npm 的方式來安裝此套件
npm install vue-loading-overlay --save

透過此套件的官方文件，我們可以得知它有兩種使用方式：

透過 Component 方式載入。
透過 Plugin 方式載入。
本次範例將以 Component 方式載入做講解。

vue-loading-overlay 載入

我們先來到 Vue Cli 的進入點(main.js)，import 以下兩支檔案：

1 2	import Loading from 'vue-loading-overlay' //component import 'vue-loading-overlay/dist/vue-loading.css' //style

利用 component 方法做載入：

1	Vue.component('Loading', Loading)

進行到這裡，我們已完成全域的 loading 設定，接下來就可以在需要 loading 的頁面上做載入。

載入 loading 特效

將此 loading 模板放入元件最外層的 div 底下(這樣才能將效果套用到整個元件頁面上，若只需要部份做套用可以僅放在需套用的區塊內即可。)，程式碼如下：

1
2
3

<div>
    <loading :active.sync="isLoading"></loading>
</div>

這是最基本的模板，isLoading負責控制效果是否出現，若要自訂效果或是增加一些控制屬性，可參考這篇文章
進行到這裡我們的頁面已會正確的出現效果，那如果要控制出現在效果的時機，我們可以透過 isLoading 的操作來控制。

控制 loading 出現時機

以範例來講，我們可以先在 data 的部分宣告我們的變數 isLoading = false，讓 loading 效果一開始是隱藏的，當 ajax 執行時觸發 loading 效果，並在 ajax 成功時，結束 loading 效果，程式碼如下：

export default {
  data () {
    return {
      products: [],
      isLoading: false
    }
  },
  methods: {
    getProducts () {
      const api = `你的 api 路徑`
      const vm = this
      vm.isLoading = true //正在執行 ajax 時 isLoading = true 觸發效果
      this.$http.get(api).then(response => {
        console.log(response.data)
        vm.isLoading = false //ajax結束時，isLoading = false 結束效果
        vm.products = response.data.products
      })
    },

FontAwesome 載入動畫效果

將 FontAwesome 引用置專案中

有兩種方法可以將FontAwesome引用：

cdn 方式
npm 安裝
cdn 方式這邊就不多加說明，我們來稍微解釋一下如何透過 npm 載入。
我們先在終端機上輸入以下指令：
npm install --save-dev @fortawesome/fontawesome-free
待安裝完畢我們會在 node_modules 資料夾底下看到 @fortawesome，這代表安裝完成。
接著我們要載入它，先來到需要使用的元件下將下列程式碼加入該元件的 style 裡。
1
2
3
<style>
@import url("@fortawesome/fontawesome-free/css/all.css");
</style>
亦或是在 main.js 輸入以下程式碼做全局載入：
1
2
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

使用 FontAwesome 動畫 icons

FontAwesome 官網中的文件有提到一種 Animating icons，只要加入此 icon 就會有動畫載入的效果 — Animating icons。
當然我們也可以控制 icons 的出現時機，方法和 vue-loading-overlay 相似，只是這邊我們是用 v-if 的方式來做，以下是程式碼：

1	<i class="fas fa-spinner fa-spin" v-if="status.fileUploading"></i>

我們在 data 內宣告一個變數負責判斷 icons 的出現。

export default {
  data () {
    return {
      status: {
        fileUploading: false
      }
    }
  }

最後一樣的可以根據事件的觸發來改變 this.status.fileUploading 的布林數，進而觸發 icons 的顯示與隱藏。
最後有一點要補充，還是會建議 FontAwesome 載入效果主要用在局部，若要全局效果還是會建議使用 vue-loading-overlay

FontAwesome 打包時注意!!

因為 FontAwesome 打包後容量較大，若不修改容量限制會導致 FontAwesome 無法一起被打包。
因此我們需要對設定檔做修改。
來到 build 底下的 webpack.base.conf.js 找到下列程式碼：

{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 800000, //預設是10000，這邊修改成800000
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}

修改完後，再執行 npm run build 打包動作。
僅限利用 npm 方式引入 FontAwesome 需做此修改，若為 cdn 方式引用不需這樣做。

參考資料

六角學院課程–Vue 出一個電商網站
 JB大的文章