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>

请注意，加载程序需要知道是否已完成加载才能淡出。您还需要在您的应用程序中检查它，因此它仍然需要准备数据时不会显示。否则，来自后台应用程序部分的信息可能会泄漏（例如，滚动条可能在LoadingScreen上可见）。因此App.vue可以有这样的模板：

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

如果要让LoadingScreen div完全消失，则需要在App.vue本身中管理渐变动画的状态，这会使它变得更加复杂（我可能会使用两个道具来进行LoadingScreen然后：isLoading和fadeout，其中fadeout是一个回调，一旦淡出动画完成，就会在LoadingScreen中被调用）。

我已经为您准备了codesandbox，其中包含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-index技巧，并且已安装在App组件中。当然，您可以创建一个仅用于加载的组件，因此它将变为：

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部分与您相关）：here

如何在VueJS中创建启动画面？

2 个答案: