前言：????????
? ? ? ? 今天實現一個小小的優化，業務上是后端需要從設備上拿數據，所以前端需要不斷調用一個查詢接口，直到后端數據獲取完畢，前后端根據一個ending字段為true判斷停止調用查詢接口。由于這個查詢時間比較久，所以需要一個laoding效果。
優化：前端除了根據后端返回的ending字段判斷停止調用查詢接口以外，還會給出一個30秒的兜底時間，也就是說30秒之后如果ending字段依舊是false，前端就認為查詢超時，停止loading和調用接口，而且想把這個30秒的時間放在loading上，可以更好的告訴用戶需要等待最長大概30秒左右。
突然感覺前面廢話有點多，因為可能是剛寫好所以有點激動。
簡單講就是實現一個loading伴隨著倒計時時間結束而停止的一個效果，效果如下：
el-loading倒計時
然后直接上代碼，我一般習慣在HBuilder上先寫一個小的demo來測試一下，如果ok了，再在項目中去實現，以下代碼是可以直接使用的，效果就是上面的視頻了（你們喜歡復制粘貼，我懂得，我也是CV工程師）：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body><div id="app" ><el-button @click="clickButton" v-loading.fullscreen.lock="fullscreenLoading" :element-loading-text=`${time}秒后返回`>Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog></div>
</body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function() {return { time:4,fullscreenLoading:false,visible: false,data: [{id: 1,label: '一級 1',children: [{id: 4,label: '二級 1-1',children: [{id: 9,label: '三級 1-1-1'}, {id: 10,label: '三級 1-1-2'}]}]}, {id: 2,label: '一級 2',children: [{id: 5,label: '二級 2-1'}, {id: 6,label: '二級 2-2'}]}, {id: 3,label: '一級 3',children: [{id: 7,label: '二級 3-1'}, {id: 8,label: '二級 3-2'}]}],defaultProps: {children: 'children',label: 'label'}}},methods:{clickButton(){this.fullscreenLoading = true;// setTimeout(() => {// this.fullscreenLoading = false;// }, 2000);const timer = setInterval(() => {console.log(123,this,this.$loading,this.time) this.time = this.time -1;// time為0的時候就關閉loadingif (this.time === 0) {clearInterval(timer);this.fullscreenLoading = false;}}, 1000);//恢復初始值 this.time = 4}}})</script>
</html>?我覺得代碼大家都能看懂，起碼前端的明白就OK了。
（1）主要就是el-loading和setInterval定時調用的一個配合使用，
（2）就是element-loading-text也可以動態綁定變量去做出數據的響應式的變化
對，大概是這么個思路。具體的話各位可以再根據實際業務去添加邏輯。我的這個業務場景主要是因為去拿數據時間比較長，一般的請求很快回來的數據不必添加倒計時，也就是一瞬間的的事情。
)
