vue+elementUI自定义全局加载中遮罩

1. 前提：项目完整引入了 Element， Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，会返回一个 Loading 实例
   
   
   
2. 自定义函数
   

   export function openLoading() {
     const loading = this.$loading({ // 声明一个loading对象
       lock: true, // 是否锁屏
       text: '拼命读取中', // 加载动画的文字
       spinner: 'el-icon-loading', // 引入的loading图标
       background: 'rgba(0, 0, 0, 0.7)' // 背景颜色
     })
     setTimeout(function() { // 设定定时器，超时2S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
       loading.close() // 关闭遮罩层
     }, 2000)
     return loading
   }

    

3. 在main.js中引入并挂载到Vue实例上
   

   Vue.prototype.openLoading = openLoading

    

4. 使用：
   

   1. data中定义加载层信息变量rloading
     data() {
       return {
         rloading: []
       }
     }
   
   2. 进入页面/请求接口前打开遮罩：
     this.rloading = this.openLoading()
   
   3. 数据响应之后关闭遮罩：
     this.rloading.close()