Nuxt.js loading 屬性配置

loading 屬性配置

• 類型： Boolean 或 Object 或 String

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

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

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

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

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

禁用加載進(jìn)度條

• 類型： Boolean

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

module.exports = {
  loading: false
}

個(gè)性化加載進(jìn)度條

• 類型： Object

以下表格為進(jìn)度條定制化時(shí)可用到的配置項(xiàng)及其說明。

舉個(gè)例子，一個(gè)5像素高的藍(lán)色進(jìn)度條，可以在 nuxt.config.js 中配置如下：

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

自定義加載組件

• 類型： String

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

自定義組件需要實(shí)現(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'
}

進(jìn)度條時(shí)長說明

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

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

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

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