Nuxt/Vue:如何定位自定义加载组件 [英] Nuxt/Vue: How to position custom loading component
本文介绍了Nuxt/Vue:如何定位自定义加载组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用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:如何定位自定义加载组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文