Nuxt / Vue：如何定位自定义加载组件

Question

我使用nuxt，并且按照此指南制作了自定义加载组件： https://nuxtjs.org/api/configuration-loading/#use-a-custom-loading-component

这确实有效，但是加载器与原始nuxt加载器栏的位置相同：

您可以看到，我确实添加了一个非常大且非常简单的加载器，并带有一个红色的div。

在底部，您可以看到我的标题栏（带有字母“ s”的黑色标题栏） 所以一切都向下移动。

我想实现的是，加载器取页面内容的位置，而不是将页眉和页脚固定在适当的位置。 现在，它们全部向下移动，以在顶部为自定义加载器腾出空间。

有解决方案吗？ 预先感谢

欢呼

J

Answer 1

我建立了一个重要的解决方法：

我在nuxt.config中设置了一个加载组件：

loading: '~/components/Loading/Loading.vue',

该组件从不显示任何内容，但具有以下两种方法：

methods: {
  start () {
    this.$store.commit('ui/SHOW_LOADER')
  },
  finish () {
    this.$store.commit('ui/HIDE_LOADER')
  }
}

通过这些，我对vuex ui商店进行了变异。

export const mutations = {
  SHOW_LOADER (state) {
    state.nuxtLoader = true
  },
  HIDE_LOADER (state) {
    state.nuxtLoader = false
  }
}

nuxtLoader: false, <=> nuxtLoader: true,

在这家商店里，我设置了一个吸气剂：

export const getters = {
  nuxtLoader: state => state.nuxtLoader
}

在布局中，根据ui商店的<nuxt />属性，显示CustomLoader或nuxtLoader组件（其中包含动画SVG）。

<template>
    <div>
      <HeaderBar />
      <main id="main" class="Layout__content">
        <CustomLoader v-if="nuxtLoader" />
        <nuxt v-else />
      </main>
      <Footer />
    </div>
</template>

现在，我向用户提供了一个自定义加载器的反馈，该加载器位于页眉和页脚之间。

我仍然愿意减少工作量和解决问题的方法。

欢呼

J