Nuxt.js loading 屬性配置

loading 屬性配置

• 類型： Boolean 或 Object 或 String

在頁面切換的時候，Nuxt.js 使用內(nèi)置的加載組件顯示加載進度條。你可以定制它的樣式，禁用或者創(chuàng)建自己的加載組件。

在你的組件中你可以使用this.$nuxt.$loading.start()來啟動加載條。使用this.$nuxt.$loading.finish()來使加載條結束。

export default {
  mounted () {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()

      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

如果要在mounted方法中啟動它，請確保使用this.$nextTick來調(diào)用它，因為$loading可能無法立即使用。

禁用加載進度條

• 類型： Boolean

頁面切換的時候如果不想顯示加載進度條，可以在 nuxt.config.js 里面增加 loading: false 的配置：

module.exports = {
  loading: false
}

個性化加載進度條

• 類型： Object

以下表格為進度條定制化時可用到的配置項及其說明。

舉個例子，一個5像素高的藍色進度條，可以在 nuxt.config.js 中配置如下：

module.exports = {
  loading: {
    color: 'blue',
    height: '5px'
  }
}

自定義加載組件

• 類型： String

你可以新建一個加載組件替代 Nuxt.js 默認的。 使用自己的加載組件，需要在 loading 配置項里指定組件的路徑，Nuxt.js 會自動調(diào)用該組件。

自定義組件需要實現(xiàn)以下接口方法：

我們可以在 components 目錄下創(chuàng)建自定義的加載組件，如 components/loading.vue：

<template lang="html">
  <div class="loading-page" v-if="loading">
    <p>Loading...</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false
  }),
  methods: {
    start () {
      this.loading = true
    },
    finish () {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-top: 200px;
  font-size: 30px;
  font-family: sans-serif;
}
</style>

然后, 更新 nuxt.config.js 告訴 Nuxt.js 使用自定義加載組件：

module.exports = {
  loading: '~components/loading.vue'
}

進度條時長說明

Loading組件不可能事先知道多長時間。加載新頁面將需要。因此，無法將進度條準確地設置為100%的加載時間。

Nuxt的加載組件通過讓你設置 duration 來部分解決這個問題，這應該設置為 guestimate 加載過程需要多長時間。 除非您使用自定義加載組件，否則進度條將始終在 duration 時間內(nèi)從0%移至100%（無論實際進度如何）。 當加載時間超過 duration 時，進度條將保持100%直到加載完成。

您可以通過將continuous設置為true來更改默認行為，然后在達到100%后，進度條將在duration時間內(nèi)再次收縮回0%。當達到0%后仍未完成加載時，它將再次從0%開始增長到100%，這將重復直到加載完成。

持續(xù)進度條的示例：