【转】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>