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

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

news 2025/12/16 15:02:27

前言：        

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/12/16 3:57:45

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2025/12/16 3:57:58

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/12/12 19:56:45

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/12/14 22:02:31

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/12/16 6:56:25

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/11/4 17:30:04

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2025/12/6 21:11:16

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

编程新知 2025/12/5 13:12:50

数据分析六部曲？

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

编程新知 2025/12/16 2:19:25

Selenium 查找页面元素的方式

Selenium 查找页面元素的方式 Selenium 提供了多种方法来查找网页中的元素&#xff0c;以下是主要的定位方式&#xff1a; 基本定位方式 通过ID定位 driver.find_element(By.ID, "element_id")通过Name定位 driver.find_element(By.NAME, "element_name"…...

编程新知 2025/12/6 0:22:05