Vue 简单 splash

Vue splash

<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>

<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>