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

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

news 2026/2/9 21:10:29

前言：        

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2026/2/1 3:20:44

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/2/8 21:57:26

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/28 4:50:33

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37