【轉】Vue v-loading實現加載效果

版權聲明：本文為CSDN博主「No Silver Bullet」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sunhuaqiang1/article/details/95474410

————————————————

使用v-loading在接口為請求到數據之前，顯示加載中，直到請求到數據后消失。

//全局loading
<template>
    <div v-loading="loading"> </div>
</template>

在data 中定義初始化， loading: false，同時在mounted()中將 this.loading設置為true,再去請求接口

在接口的回調函數中，將 this.loading 設為false，到達效果。

如果寫在template下的頂層元素上的話，就不會觸發全屏loading

//局部loading
<template>
    <div> 
        <section v-loading="loading"></section>
    </div>
</template>

實戰

<template>
    <div class="grid-content bg-purple">
       <div>…………</div>
       <div>…………</div>     
        <div v-loading="loading" style="height: 280px;padding:16px;box-sizing:border-box;" id="xx">         
        </div>    
    </div>
</template>

<script>
import { getTbFun } from "../assets/js/api.js";
export default {
    name:'template1',
    data(){
      return{
      loading:true
      }
   }，
     mounted() {
        this.getData();
     },
    methods:{
     getData() {
         getTbFun().then(function (res) {
                that.loading = false;
            })
            .catch(function (err) {
                console.log("err--------", err);
                that.loading = false;
            });
      },
   },
}
</script>