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
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。