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

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

news 2025/12/17 12:28:20

前言：        

        今天实现一个小小的优化，业务上是后端需要从设备上拿数据，所以前端需要不断调用一个查询接口，直到后端数据获取完毕，前后端根据一个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中显示倒计时时间

前言&#xff1a; 今天实现一个小小的优化&#xff0c;业务上是后端需要从设备上拿数据&#xff0c;所以前端需要不断调用一个查询接口&#xff0c;直到后端数据获取完毕&#xff0c;前后端根据一个ending字段为true判断停止调用查询接口。由于这个查询时间比较久&…...

编程日记 2024/5/30 6:15:06

5月29日，每日信息差

第一、据悉&#xff0c;微信视频号直播电商团队将并入到微信开放平台&#xff08;小程序、公众号等&#xff09;团队&#xff0c;原微信视频号直播电商团队转由微信开放平台负责人负责。知情人士表示&#xff0c;此次调整&#xff0c;将有助于微信视频号直播电商业务更好地融入…...

编程日记 2024/5/30 6:14:05

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

总结&#xff1a; FIC决赛的时候&#xff0c;很多小问题没发现&#xff0c;在pve平台做题确实很方便。 这套题目复盘完&#xff0c;服务器这块的知识确实收获了很多&#xff0c;对pve集群平台和网络拓扑也有了一定的认识&#xff0c;感谢各位大佬悉心指导。 接下来&#xff0…...

编程日记 2024/5/30 6:13:03

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

Element-UI 是一个基于 Vue.js 的前端组件库&#xff0c;它提供了丰富的 UI 组件&#xff0c;可以帮助开发者快速构建高质量的用户界面。以下是使用 Element-UI 的快速入门指南&#xff1a; 安装 Element-UI Element-UI 是一个基于 Vue.js 的组件库&#xff0c;它提供了丰富的…...

编程日记 2024/5/30 6:12:02

vs工程添加自定义宏

一、简介 用户可以添加自定义宏变量方便工程路径名称的修改和配置 例&#xff1a;$(SolutionDir) 为解决方案路径&#xff0c;$(PojectDir) 为工程所在路径 测试环境&#xff1a;vs2017&#xff0c;qt5.14.0 二、配置 1、打开属性窗口&#xff1a;视图-》其他窗口-》属性管…...

编程日记 2024/5/30 6:06:56

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

shell脚本&#xff1a;将一维数组改成二维数组显示 1.编辑脚本文件 vi output_array.sh2.编写脚本 #!/bin/bash# 假设一维数组one_array已经包含9个元素 one_array(1 2 3 4 5 6 7 8 9) # 获取数组长度 length${#one_array[]} # 数组长度除以3获得新数组行数n n$((length / …...

编程日记 2024/5/30 6:03:52

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

在上篇文章中描述了怎样搭建读写数据库的环境。 本文更进一步&#xff0c;描述了读写mySQL数据库&#xff0c;字符、整型数字、图片。读写图片相对难点。 数据库的图片字段用BLOB&#xff0c;如果图片较大要用longblob,否则会报错。 另外&#xff0c;读写数据库都使用了短连…...

编程日记 2024/5/30 6:02:51

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

1、进程控制几个过程 创建进程--》执行进程---》终止进程 2、进程标识 &#xff08;1&#xff09;专用进程&#xff1a;ID为0的进程是调度进程&#xff0c;常常被称为交换进程&#xff0c;也称为系统进程&#xff1b; ID为1通常是init进程&#xff0c;在自举结束时由内核调用…...

编程日记 2024/5/30 6:00:48

Facebook之魅：数字社交的体验

在当今数字化时代&#xff0c;Facebook作为全球最大的社交平台之一&#xff0c;承载着数十亿用户的社交需求和期待。它不仅仅是一个简单的网站或应用程序&#xff0c;更是一个将世界各地的人们连接在一起的社交网络&#xff0c;为用户提供了丰富多彩、无与伦比的数字社交体验。…...

编程日记 2024/5/30 5:58:46

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

可以尝试手动在cmd中修改&#xff0c;命令&#xff1a; netsh interface ip set address name"以太网 x" static 新IP地址 子网掩码 网关 注意以太网x之间有空格&#xff0c;以太网外面的引号是英文的。 也可以先在cmd依次输入“netsh”、“interface”&#xff0…...

编程日记 2024/5/30 5:57:44

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

1、播放器整体布局的设计 该部分使用QT的UI工具&#xff0c;进行整体页面设置&#xff0c;如下图1所示&#xff1a; 2、控制布局的设计 创建ctrBar的UI页面并进行页面布局设置&#xff0c;如下图2所示&#xff1a; 将图1中ctrBarWind对象提升为ctrBar类(该界面替代原先的控…...

编程日记 2024/5/30 5:54:41

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

笔记主要内容来自 爱编程的大柄–线程 爱编程的大柄–线程同步 在进入代码实践之前&#xff0c;我们应该搞清楚。 线程是成语的最小执行单位&#xff0c;进程是操作系统中最小的资源分配单位。 这样的话我们可以理解以下两点&#xff1a; 同一地址空间中的多个线程独有的是&…...

编程日记 2024/5/30 5:53:39

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

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;越来越多的科技公司如雨后春笋般涌现。然而&#xff0c;在这个信息爆炸的时代&#xff0c;如何判断一家公司是否正规成为了许多人关注的焦点。本文将围绕“四川汇聚荣聚荣科技有限公司是否正规”这一问题展开讨论&#xf…...

编程日记 2024/5/30 5:51:37

tomcat学习--部署java项目

主流开发项目&#xff0c;springboot框架下&#xff0c;jar部署java传统的tomcat发布war包 一 什么是tomcat&#xff1f; 是一个用于运行java程序的软件&#xff0c;发布的时候&#xff1a;开发将源码使用maven打包&#xff0c;生产war包 二 安装tomcat tomcat是java写的&a…...

编程日记 2024/5/30 5:50:36

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

本文字数&#xff1a;7539字 预计阅读时间&#xff1a;30分钟 01 前言 说起小游戏&#xff0c;最经典的莫过于飞机大战了&#xff0c;相信很多同学都玩过。今天我们也来试试开发个有趣的小游戏吧&#xff01;我们将从零开始&#xff0c;看看怎样一步步实现一个H5版的飞机大战&a…...

编程日记 2024/5/30 5:49:35

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

环境&#xff1a;Centos7.6_x86 一、extundelete工具 1、extundelete介绍 Extundelete 是一个数据恢复工具&#xff0c;用于从 ext3 或 ext4 分区中恢复删除文件。根据官网0.2.4版本介绍是支持ext4&#xff0c;但实际上使用发现ext4格式不行&#xff0c;会报以下错误&#xf…...

编程日记 2024/5/30 5:48:33

用户接入和认证技术

一、用户接入和认证配置 称为网络接入控制&#xff0c;通过对接入网络的客NAC (Network Admission Control)户端和用户的认证保证网络的安全&#xff0c;是一种“端到端”的安全技术。包括802.1x认证、MAC认证与Portal认证。 二、三种认证方式简介 1、Portal认证 Portal认证通…...

编程日记 2024/5/30 5:47:32

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

目录 1. 说明2. 启动&#xff08;Initialization&#xff09;3. 运行&#xff08;Running&#xff09;4. 服务&#xff08;Servicing&#xff09;5. 终止&#xff08;Termination&#xff09; 1. 说明 1.Java虚拟机&#xff08;JVM&#xff09;的生命周期通常指的是JVM实例从启…...

编程日记 2024/5/30 5:46:31

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

随着网络应用的不断发展和用户访问量的增长&#xff0c;如何确保系统的高可用性、实现负载均衡以及快速响应故障转移成为了每个运维和开发团队必须面对的挑战。Nginx作为一款高性能的HTTP和反向代理服务器&#xff0c;凭借其强大的功能和灵活的配置&#xff0c;成为了实现这些目…...

编程日记 2024/5/30 5:45:29

计算机网络-运输层

运输层 网络层在两个端系统之间的交付服务拓展到运行在两个不同端系统上的应用层进程之间的交付服务。 概述和运输层服务 运输层协议为运行在不同主机上的引用进程之间提供了逻辑通信功能。通过逻辑通信&#xff0c;运行在不同进程之间的主机好像直接连接一样。 运输层协议…...

编程日记 2024/5/30 5:44:28

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/12/9 23:28:12

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/12/12 3:35:27

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/17 1:57:24

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/12/12 18:29:04

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/12/14 20:54:38

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/12/7 14:31:27

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/12/3 6:15:42

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...

编程新知 2025/12/12 21:26:58