Nuxt Loading Component: Customize the Progress Bar

在開始前，請先看過一遍Nuxt Loading官方文件

如果沒有要調整progress bar的位置，可直接在nuxt.config.js內設定loading的property就好

(2.x版官方提供的設定值如下圖)

本文主要說明Hamsterism所使用的客製化loading component如何實作

在切換頁面時，會發現在頂端黑色nav bar下方會快速地跑過progress bar動畫

為了讓progress bar固定在nav bar下方，我選擇採自製loading component的方式

直接上component程式碼

<template>
  <div
    v-if="status"
    :class="{ successful: success, failed: failure }"
    class="loading-bar"
    :style="barOpacity"
  >
    <div
      :class="{ failed: failure }"
      class="loading-bar-shadow"
      :style="barOpacity"
    ></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      error: false,
      success: false,
      failure: false,
    }
  },
  computed: {
    barOpacity() {
      return {
        opacity: this.status ? '1' : '0',
      }
    },
    status() {
      return this.$store.getters['isLoading']
    },
  },
  methods: {
    start() {
      this.$store.commit('unload')
      this.success = false
      this.failure = false
      this.$store.commit('load')
    },
    finish() {
      this.success = true
      this.$store.dispatch('unload')
    },
    fail(error) {
      this.error = error
      this.failure = true
    },
  },
}
</script>
<style lang="scss" scoped>
.loading-bar {
  display: block;
  position: fixed;
  top: 3rem;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 49;
  transition: all 0.3s linear;
  background-color: $hamsterism-btn-color-primary;
  overflow: hidden;
  animation: loading 5s ease-in-out;
  animation-fill-mode: both;
  &.failed {
    background-color: $hamsterism-btn-color-danger-dark;
    width: 100%;
    animation: none;
  }
  &.successful {
    width: 100%;
    animation: none;
  }
  &-shadow {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 3px;
    box-shadow: 1px 0px 10px $hamsterism-btn-color-primary;
    transform: rotate(3deg) translate(0px, -1px);
    &.failed {
      box-shadow: 1px 0px 10px $hamsterism-btn-color-danger-dark;
    }
  }
}
@keyframes loading {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>

關鍵method

官方提供四個客製化時會用到的method：start()、finish()、fail(error)、increase(num)

前三個開始、結束、失敗很直觀沒問題

最後一項increase(num)由於缺少範例，所以我不知道該怎用，直接放棄Ovo

因為放棄了控制一次increase多少進度的功能，所以整個載入以固定時長的動畫實作

動畫設計很簡單，從0%到100%，控制width變化

時長我設為5s，超過五秒以上的載入會卡在100%的意思

早於5s完成的話，Nuxt會觸發finish()，在scss的&.successful控制使width變為100%

同理，若載入失敗，Nuxt會觸發fail()，在scss的&.failed控制width變為100%且變色

Store管理loading狀態

看官網文件會發現，它的loading變數寫在component的data內

原先我也是用這寫法，但發現頁面切換上animation狀態變超怪...

由於搞不懂Nuxt呼叫loading component的變數記憶情況

我改將loading的狀態統一由store(vuex)來管理，最沒爭議Ovo

直接寫在~/store/index.js (你要另外創一個loading.js也可以)

export const state = () => ({
  loading: false,
})
export const getters = {
  isLoading(state) {
    return state.loading
  },
}
export const mutations = {
  load(state) {
    state.loading = true
  },
  unload(state) {
    state.loading = false
  },
}
export const actions = {
  unload({ commit }) {
    setTimeout(() => {
      commit('unload')
    }, 300)
  },
}

更改狀態的mutation很簡單，需要注意的關鍵點在action unload()

以setTimeout延遲300ms才發出unload的狀態變更，來配合 transition: all 0.3s linear;

不然progress bar會提前消失唷！

至於固定特定位置、變更顏色、變更粗細等，都在scss的 .loading-bar 內客製

修改nuxt.config.js

最後一步，在nuxt.config.js告訴Nuxt你的loading要用自己做出來的組件

(component位置就看你放哪兒)

export default {
  //...
  loading: '~/components/ui/LoadingBar.vue',
  //...
}

完成！👏👏👏