實(shí)際開發(fā)中剃氧，要如何指定loading在我們想要的區(qū)域加遮罩呢饱普？
前提：
你已經(jīng)引入element-ui，如下：
import ElementUI from 'element-ui'
import { Loading } from 'element-ui'
1、在vue的原型鏈上定義一個(gè)打開loading的方法：
Vue.prototype.openLoading = function() {
const loading = this.$loading({ // 聲明一個(gè)loading對(duì)象
lock: true, // 是否鎖屏
text: '正在加載...', // 加載動(dòng)畫的文字
spinner: 'el-icon-loading', // 引入的loading圖標(biāo)
background: 'rgba(0, 0, 0, 0.3)', // 背景顏色
target: '.sub-main', // 需要遮罩的區(qū)域
body: true,
customClass: 'mask' // 遮罩層新增類名
})
setTimeout(function () { // 設(shè)定定時(shí)器，超時(shí)5S后自動(dòng)關(guān)閉遮罩層玖媚，避免請(qǐng)求失敗時(shí)，遮罩層一直存在的問題
loading.close(); // 關(guān)閉遮罩層
},5000)
return loading;
}
2婚脱、在開始請(qǐng)求接口是調(diào)用改方法今魔，因?yàn)槲覀兪侵苯佣x在VUE原型鏈上的方法勺像，所以我們可以直接this調(diào)用
const rLoading = this.openLoading();
3、請(qǐng)求成功后執(zhí)行關(guān)閉操作：
rLoading.close();
