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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。