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

我使用nuxt并按照本指南制作自定义加载组件：

这确实有效，但装载机与原始nuxt装载机杆处于相同位置：

你可以看到，我真的添加了一个非常大和非常简单的加载程序，带有一个红色的div

在底部，您可以看到我的头像（带字母«s»的黑条） 所以一切都向下移动

我想要实现的是，加载器占据页面内容的位置，而不是保持页眉和页脚在适当的位置。 现在，它全部向下移动，以便为顶部的自定义加载程序腾出空间

有解决办法吗？ 提前谢谢

干杯

---

J

我建立了一个大的解决方案：

我在我的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
  }
}

numtloader:false，

numtloader:true，

在这个商店里，我设置了一个getter：

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

在我的布局中，我会根据ui store

nuxtLoader

属性显示

或

CustomLoader

组件（其中包含一个动画SVG）

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

---

现在，我给用户一个反馈，在头部和页脚之间放置一个自定义加载器。然而，这是我遇到的最灵活的解决方案，但由于答案是大约一年前的问题，我很好奇您是否同时发现了一些不那么“黑客”的东西？我不再关心定制加载程序：）因此，没有，不幸的是没有。但我意识到nuxt做了一些更改。大多数情况下，我们将几乎所有页面加载到应用程序的状态中。无论何时进行页面转换，加载程序都不会显示（至少几个月前）。这仅在获取帖子/页面时显示。。。只是数据，与asyncData异步。因此，对自定义加载程序的需求也减少了。。。