如何在 Nuxt.js 中創建自定義加載指示器？

Question

在此頁面內（ https://nuxtjs.org/api/configuration-loading-indicator#custom-indicators ）說我可以創建自定義加載指示器，但沒有說明如何創建。

有人可以幫助我 - 如何創建並將其設置為 nuxt.config？

Answer 1

這是 Nuxt.js 源代碼中默認加載指示器的集合。

基本上，你可以指定HTML模板作為使用loadingIndicator在nuxt.config.js 。

export default {
  ..., // Other Nuxt configuration

  // Simple usage:
  loadingIndicator: '~/custom-locading-indicator.html',

  // Or with dynamic configuration variables passed via lodash template syntax
  loadingIndicator: {
    name: '~/custom-locading-indicator.html',
    color: '#000',
    background: '#fff'
  }
}

請注意，指標可以訪問

Answer 2

Nuxt 還提供了一個$loading組件，因此您可以在您的應用程序中的任何地方使用它，無論如何。 使用$nuxt.$loading.get()將返回當前的加載百分比。

例如：

<template>
  <div>
    <h1>Home page</h1>
    <div v-show="$nuxt.$loading.get() > 0">
      {{loadingIndicator}}%
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    loadingIndicator() {
      return this.$root.$loading.get()
    }
  }
}
</script>

Answer 3

在@femanso 之后，我設法使用window.$nuxt.$root.$loading.percent $nuxt.$loading.get()而不是$nuxt.$loading.get()自定義我的加載組件

computed: {
    loadingIndicator() {
      return  window.$nuxt.$root.$loading.percent
    }
  },

Answer 4

如果有人偶然發現並希望從 vue 組件獲取當前加載進度，您可以使用：

編輯：它一直工作到我重新啟動開發服務器，然后它停止工作。 所以不確定這是否是一個可行的解決方案。

  computed: {
    nuxtLoading() {
      return this.$nuxt.$loading.percent
    },
  },

Answer 5

使用 Bootstrap 5 微調器（ https://v5.getbootstrap.com/docs/5.0/components/spinners/ ），模式：'universal'

在 nuxt.config.js 中

加載：'~/components/loading.vue'

在組件中

<template>
  <div 
    v-if="isLoading"
    class="loader"
  >
    <div class="loader__spinner spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.loader {
  &__spinner {
    position: fixed;
    top: 10px;
    left: 10px;
  }
}
</style>

https://nuxtjs.org/guides/configuration-glossary/configuration-loading https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file =/components/loading.vue

Answer 6

這是你需要的：

您可以為您的應用程序創建一個組件。 你可以在這里閱讀Nuxt Loading

• 設置組件已loading: <your-component-path>在此處閱讀更多加載指示器 Property 。
• 為了讓 nuxt 在你的頁面上加載它，你需要添加：

  loadingIndicator: {
    name: 'chasing-dots',
    color: 'purple',
    background: 'green'
  }

這是我如何在我的應用程序中配置組件的示例。

export default {

  // LoadingBar component
  loading: '~/path-to-your-loading-component/Loading.vue',
}

在要加載的頁面上，添加此內容。

export default {
  /*
   ** programmatically start the loader so we force the page to take x2seconds to load
   */
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  }
}
</script>
```