前言：
今天实现一个小小的优化，业务上是后端需要从设备上拿数据，所以前端需要不断调用一个查询接口，直到后端数据获取完毕，前后端根据一个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的时候就关闭loading
if (this.time === 0) {
clearInterval(timer);
this.fullscreenLoading = false;
}
}, 1000);
//恢复初始值
this.time = 4
}
}
})
</script>
</html>
我觉得代码大家都能看懂，起码前端的明白就OK了。
（1）主要就是el-loading和setInterval定时调用的一个配合使用，
（2）就是element-loading-text也可以动态绑定变量去做出数据的响应式的变化
对，大概是这么个思路。具体的话各位可以再根据实际业务去添加逻辑。我的这个业务场景主要是因为去拿数据时间比较长，一般的请求很快回来的数据不必添加倒计时，也就是一瞬间的的事情。