全局使用elementUI中的loading加载动画

1.按需引入Loading

import { Loading } from 'element-ui'

Vue.use(Loading)   // 使用服务方式的话，只安装Loading即可
Vue.use(Loading.directive)  //  指令方式(v-loading)的话这两行都得有

2.在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() { // 设定定时器，超时10S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
		loading.close() // 关闭遮罩层
	}, 10000)
	return loading
}

3.开启加载动画

const rLoading = this.openLoading()

4.关闭加载动画

rLoading.close()