当前位置：首页 > news >正文

Debug-013-el-loading中显示倒计时时间

news 2025/7/13 2:13:02

前言：

今天实现一个小小的优化，业务上是后端需要从设备上拿数据，所以前端需要不断调用一个查询接口，直到后端数据获取完毕，前后端根据一个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也可以动态绑定变量去做出数据的响应式的变化

对，大概是这么个思路。具体的话各位可以再根据实际业务去添加逻辑。我的这个业务场景主要是因为去拿数据时间比较长，一般的请求很快回来的数据不必添加倒计时，也就是一瞬间的的事情。

Debug-013-el-loading中显示倒计时时间

相关文章：

Debug-013-el-loading中显示倒计时时间

5月29日，每日信息差

2024年弘连网络FIC大会竞赛题线下决赛题

Element-UI 入门指南：从安装到自定义主题的详细教程

vs工程添加自定义宏

shell脚本：将一维数组以二维数组显示

QT C++ 读写mySQL数据库图片例子

Unix环境高级编程--8-进程控制---8.1-8.2进程标识-8.3fork函数-8.4 vfork函数

Facebook之魅：数字社交的体验

【重装windows遇到网络适配器无法更改】

FFmpeg+QT播放器实战1---UI页面的设计

C/C++语法｜pthread线程库的使用

四川汇聚荣聚荣科技有限公司是正规的吗？

tomcat学习--部署java项目

用 vue3 + phaser 实现经典小游戏：飞机大战

【Linux|数据恢复】extundelete和ext4magic数据恢复工具使用

用户接入和认证技术

【面试】Java虚拟机的生命周期

Nginx高可用性架构：实现负载均衡与故障转移的探索

计算机网络-运输层

SpringBoot-17-MyBatis动态SQL标签之常用标签

19c补丁后oracle属主变化，导致不能识别磁盘组

golang循环变量捕获问题

IGP（Interior Gateway Protocol，内部网关协议）

Objective-C常用命名规范总结

【磁盘】每天掌握一个Linux命令 - iostat

vue3 字体颜色设置的多种方式

汇编常见指令

python执行测试用例，allure报乱码且未成功生成报告

听写流程自动化实践，轻量级教育辅助