element-ui中的loading的实际应用

实际开发中，要如何指定loading在我们想要的区域加遮罩呢？
前提：
你已经引入element-ui，如下：
import ElementUI from 'element-ui'
import { Loading } from 'element-ui'

1、在vue的原型链上定义一个打开loading的方法：

Vue.prototype.openLoading = function() {
  const loading = this.$loading({           // 声明一个loading对象
    lock: true,                             // 是否锁屏
    text: '正在加载...',                     // 加载动画的文字
    spinner: 'el-icon-loading',             // 引入的loading图标
    background: 'rgba(0, 0, 0, 0.3)',       // 背景颜色
    target: '.sub-main',                    // 需要遮罩的区域
    body: true,                              
    customClass: 'mask'                     // 遮罩层新增类名
  })
  setTimeout(function () {                  // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
    loading.close();                        // 关闭遮罩层
  },5000)
  return loading;
}

2、在开始请求接口是调用改方法，因为我们是直接定义在VUE原型链上的方法，所以我们可以直接this调用

const rLoading = this.openLoading();

3、请求成功后执行关闭操作：

rLoading.close();

作者：小太阳可可
链接：https://www.jianshu.com/p/df4a45488404
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。