Нукс.js: добавить пользовательский компонент загрузки
Я пытался добавить loading spinner в свой проект NuxtJS, используя конфигурацию загрузки: https://nuxtjs.org/api/configuration-loading -да .
Однако документация трудна для понимания, я понятия не имею, как применить ее к моему проекту. Есть ли у кого-нибудь идеи о том, как добавить загрузочный спиннер с помощью этого?
Заранее спасибо,
Ответы - Нукс.js: добавить пользовательский компонент загрузки / Nuxt.js: add custom loading component
07.05.2019 06:17:34
Таким образом, вы можете создать пользовательскую загрузку:
Мы можем создать наш пользовательский компонент в компонентах / загрузке.вю:
<template lang="html">
<div class="loading-page" v-if="loading">
<p>Loading...</p>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start () {
this.loading = true
},
finish () {
this.loading = false
}
}
}
</script>
<style scoped>
.loading-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
text-align: center;
padding-top: 200px;
font-size: 30px;
font-family: sans-serif;
}
</style>
Затем мы обновим наш nuxt.конфиг.js, чтобы рассказать Nuxt.js использовать наш компонент:
export default {
loading: '~/components/loading.vue'
}
И тогда в вашем compenent можно отображать и скрывать с:
этот.$nuxt.$погрузочный.start () для запуска панели загрузки и этого.$nuxt.$погрузочный.finish (), чтобы закончить его.
Вы можете поместить это в обратные вызовы запроса.