Как мне создать заставку в VueJS?

Question

Я пытаюсь создать заставку (экран загрузки) в Vue JS, которая через несколько секунд исчезает, открывая мой дефолтный вид.Я пробовал несколько подходов, но просто не могу заставить их работать.Наиболее близким является этот пример на CodePen Но в идеале компонент должен находиться не внутри main.js, а внутри собственного компонента.Несмотря на это приведенный ниже код не будет работать.

Мой main.js выглядит следующим образом:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// FILTERS
Vue.filter('snippet', function(value) {
    return value.slice(0,100);
});

Vue.component('loading-screen', {
  template: '<div id="loading">Loading...</div>'
})

new Vue({
  router,
  store,
  render: h => h(App),
  data: {
    isLoading: true
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
}).$mount("#app");

, а мой App.vue выглядит следующим образом

<template>
  <div id="app">

    <loading-screen v-if="isLoading"></loading-screen>

    <Top/>
    <router-view/>
    <PrimaryAppNav/>

  </div>
</template>


<script>

import Top from './components/Top.vue'
import PrimaryAppNav from './components/PrimaryAppNav.vue'


export default {
  name: 'app',
  components: {
    Top,
    PrimaryAppNav
  }
}
</script>

Answer 1

Компонент LoadingScreen.vue может выглядеть следующим образом:

<template>
  <div :class="{ loader: true, fadeout: !isLoading }">
    Loading ...
  </div>
</template>

<script>
export default {
  name: "LoadingScreen",
  props: ["isLoading"]
};
</script>

<style>
.loader {
  background-color: #63ab97;
  bottom: 0;
  color: white;
  display: block;
  font-size: 32px;
  left: 0;
  overflow: hidden;
  padding-top: 10vh;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
}

.fadeout {
  animation: fadeout 2s forwards;
}

@keyframes fadeout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
</style>

Имейте в виду, что загрузчик должен знать, выполняется ли загрузка, чтобы иметь возможность исчезнуть.Вы должны проверить это и в своем приложении, чтобы оно не показывалось, пока все еще нужно подготовить данные.В противном случае информация из части приложения в фоновом режиме может быть утечка (например, полосы прокрутки могут быть видны на экране загрузки).Так что App.vue может иметь такой шаблон:

<template>
  <div id="app">
    <LoadingScreen :isLoading="isLoading" />
    <div v-if="!isLoading">
      ...your main content here...
    </div>
  </div>
</template>

Если вы хотите, чтобы div-элементы LoadingScreen полностью исчезали, вам нужно управлять состоянием анимации затухания в самом App.vue, делаяэто немного сложнее (тогда я, вероятно, использовал бы два подпорки для LoadingScreen: isLoading и fadeout, где fadeout - обратный вызов, который вызывается в LoadingScreen, как только анимация затухания завершена).

Я подготовил коды и ящик для вас с управлением состояниями внутри LoadingScreen.

Answer 2

Это рабочий файл App.vue с заставкой:

<template>
    <div id="app">
        <v-app :light="!nav.dark" :dark="nav.dark">
            <transition name="slide-fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </v-app>
        <div v-if="loading" style="position:absolute; width: 100%; height:100%; top:0; left:0; z-index:10000; background-color:white">
            <div style="margin-left: auto; margin-right: auto">
                Loading...
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "app",
        data: () => ({
            loading: true
        }),
        mounted() {
            setTimeout(() => {
                this.loading = false
            }, 3000)
        }
    }
</script>

Обратите внимание, что существует трюк с z-индексом, и он подключен к компоненту приложения.Конечно, вы можете создать компонент только для загрузки, поэтому он станет:

App.vue

<template>
    <div id="app">
        <v-app :light="!nav.dark" :dark="nav.dark">
            <transition name="slide-fade" mode="out-in">
                <router-view></router-view>
            </transition>
        </v-app>
        <loader v-if="loading"/>
    </div>
</template>

<script>
    import Loader from "./Loader"

    export default {
        name: "app",
        data: () => ({
            loading: true
        }),
        mounted() {
            setTimeout(() => {
                this.loading = false
            }, 3000)
        }
    }
</script>

Loader.vue

<template>
    <div style="position:absolute; width: 100%; height:100%; top:0; left:0; z-index:10000; background-color:white">
        <div style="margin-left: auto; margin-right: auto">
            Loading...
        </div>
    </div>
</template>

<script>
    export default {
        name: "loader"
    }
</script>

После этого янастоятельно рекомендуем использовать динамические компоненты для компонентов маршрутизатора, Top и PrimaryAppNav.Как то, что они будут загружаться во время вашего заставки.Как это легко сделать, вы найдете в моем ответе в этой теме (для вас важен только раздел 2): здесь