Nuxt/Vue:怎么定位自定义加载组件

本教程将介绍Nuxt/Vue:如何定位自定义加载组件的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

Nuxt/Vue:怎么定位自定义加载组件 教程 第1张

问题描述

我使用nuxt,并遵循以下指南自定义加载组件:
https://nuxtjs.org/api/configuration-loading/#use-a-custom-loading-component

这确实可以工作,但是加载器与原始设备加载器杆的位置相同:

您可以看到,我真的添加了一个非常大、非常简单的加载器,带有一个红色的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
  }
}

nuxtLoader: false,<=>nuxtLoader: true,

在此存储中,我设置了一个getter:

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

在我的布局上,我根据UI存储nuxtLoader属性显示<nuxt />CustomLoader组件(包含动画SVG)。

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

现在,我使用放置在页眉和页脚之间的自定义加载器向用户提供反馈。?

我仍然欢迎工作量更少、更圆滑的解决方案。

干杯

J

好了关于Nuxt/Vue:怎么定位自定义加载组件的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。