先安装引入
import ElementUI from 'element-ui'
import { Loading } from 'element-ui'
在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;
}
在开始请求接口是调用改方法，因为我们是直接定义在VUE原型链上的方法，所以我们可以直接this调用
const rLoading = this.openLoading();
请求成功后执行关闭操作：
rLoading.close();
