处理数据加载-Vue

只需添加一个加载程序即可。现在很多网站都在显示漂亮的加载图标、徽标或消息正在加载。用于检查是否正在加载数据,然后显示加载程序,否则将在该页中显示数据。

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

new Vue({
  el: '#app',
  data: {
    isLoading: true
  },
  mounted () {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
})

body
  margin 0

#loading
  background-color #63ab97
  color white
  font-size 32px
  padding-top 10vh
  height 100vh
  text-align center

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <loading-screen v-if="isLoading"></loading-screen>
  <h1 v-else>Hello world!</h1>
</div>

您可以在该页面上添加一个预加载程序,该程序在显示实际页面之前加载几秒钟

loader

//loader.vue

<template>
   <div class="loader">
      <p>Loading...</p>
   </div>
</template>
<style scoped>
.loader {
   width: 100vw;
   height: 100vh;
   background: white;
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1000000;
}
</style>

v-if 在上面。您需要将新属性添加到Vuex中的状态商店。商店 loading 属性最初为true。当你把所有的东西都装上后 错误和成分分解。

<template>
   <div>
      <loader v-if="$store.state.loading"></loader>
   </div>
</template>
import loader from "path/to/loader";
export default {
   components: {
      loader: loader
   }
}