Nuxt/Vue:怎么定位自定义加载组件
本教程将介绍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:怎么定位自定义加载组件的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。