如何添加一个loading框？

原创于 2026-10-22 09:28:01 发布 · 204 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

当前文章被以下社区和专栏收录：

本文介绍在Vue.js框架下，基于普元EOS8低代码开发平台添加loading框的方法。通过调用this.$loading()创建带遮罩、自定义文本与图标的加载提示，并在业务逻辑完成后调用close()关闭。适用于异步操作期间的用户反馈场景，依赖Element UI风格的loading组件集成。

问题描述:
如何添加一个loading框啊？

解决方案:

示例代码如下：
const loading = this.$loading({lock:true,
text:'xxx'
spinner:'el-icon-loading',
background:'rgba(0, 0, 0,0.7)});

loading.close() （按业务判断或者写在finally里）

更多请参见EOS Low-Code Platform 8

标签

#vue.js #前端 #javascript #普元EOS8低代码开发平台

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

普元产品自助学习社区

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

动手吧，vue2自定义全局loading

m0_54849873的博客

05-15

594

新建loading.vue, 用来写loading组件 <template> <div class="loading-mask flex-center-center"> <svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle> <circle c

VUE中封装一个全局的loading组件

KBK2020的博客

07-22

2891

KBK：其实刚刚开始的话，就没有想到要写loading组件，在做项目的时候，等待后台接口渲染的时候样式有点太丑，就想到做一个loading效果，其实作为前端，也可以使用vant element-ui 等，里面就有好多loading样式，但是我又有点太懒，懒得去一个一个的页面进行loading效果，就想到做一个全局的。。。话不多说，干货来了，嘻嘻 1.创建一个loading.vue , 里面的内容如下：（img 是从网上扒拉下来的，你也可以选择自己喜欢的图片哦） <template&gt

0 条评论

写评论

echarts实现3D地图——map3D

xiaoququ的博客

07-05

7324

【代码】echarts实现3D地图——map3D。

WinForm下的loading框的实现

weixin_36944798的博客

02-25

2451

原文链接：https://www.cnblogs.com/morewindows0/p/7107599.html 前言：在项目使用C/S模式情况下，由于需要经常进行数据的刷新，如果直接进行刷新，会有一个等待控件重画的过程，非常的不友好，因此在这里添加一个loading框进行等待显示。实现：在经过多方面查询资料，终于是实现了一个完整的loading框程序，这里主要解决在多次点击查询按钮或者加载数据...

简话 RAG 本地部署(DeepSeek + RAGFlow)

捉虫客 de 博客

02-11

1万+

RAG = DeepSeek + OLlama + Docker + RAGFlow + Windows 11 简话 RAG 本地部署

element弹框loading

chunchun_H

04-06

6775

弹框有两种插入模式，一种是基于写弹框的页面元素上，一种是插入至 body 元素上。无论是哪种方式，在弹框请求数据渲染页面时，如果直接给弹框加loading，第一次渲染loading位置不对。如下图 loading的层级在弹框的下面原因：loading一般加在弹框body内元素上，第一次渲染弹框body未找到就会加在弹框的最外层元素上，那层级自然不对。解决方法：打开弹框后，再元素渲染后去打开loading this.$nextTick(() => { openLoading.

深入解析uncompyle6反编译pyc文件及常见错误修复指南

uber9的博客

03-07

536

本文深入解析了使用uncompyle6工具反编译Python字节码文件（.pyc）的完整流程。针对实践中最高频的KeyError和Python版本范围限制两大错误，提供了详细的修复方案与步骤指南，并分享了处理复杂反编译结果的高级技巧与安全实践，是进行代码恢复、调试与分析的重要参考。

薅“刷宝”羊毛的autojs脚本教程，简单粗暴好用！！！

最新发布

**My Coding Family**

06-23

553

🏆 本文收录于《滚雪球学 Spring Boot 4.x》专栏。本专栏面向有一定 Java 基础，但尚未系统学习 Spring Boot 的读者，采用“滚雪球式学习法”：先跑通、再理解、再重构、再上线，带你从第一个 Hello API 开始，逐步完成一个可部署、可监控、可扩展的后端项目。

手把手教你安装 OpenClaw 小龙虾（MAC安装教程），一次成功不踩坑

Chengbei11的博客

03-12

6342

本文详细介绍了在Mac上安装OpenClaw的完整流程。主要内容包括：1)准备工作（磁盘空间、网络环境、终端工具）；2)安装Homebrew包管理器及常见问题解决；3)安装Node.js 22+版本（环境核心）；4)Git安装与验证；5)OpenClaw项目克隆、依赖安装及运行配置；6)大模型配置方法（以MiniMax为例）。文章提供了详细的命令行操作步骤和常见错误解决方案，特别强调了网络环境要求和Apple Silicon芯片的原生支持注意事项。最后展示了验证配置成功的方法和资源获取渠道。

自定义Flutter loading弹框

正义

09-28

1万+

先看效果图如下：在Flutter中，万物皆widget。所以这所谓的弹框其实也是一个widget。而现实弹框其实就是打开一个新的路由，只不过背景颜色设为透明色就行了。布局代码实现代码如下： class LoadingDialog extends Dialog { @override Widget build(BuildContext context) { return ...

那些年我们create generate clock遇到的坑

芯冰乐

02-13

136

想必大家对create_generate_clock这个命令熟悉的不能再熟悉了，然而，在真正做实际项目的时候，会出现各式各样的问题，比如在report timing时，generate clock路径不是我们预想的，source latency丢失等等，今天小编就跟大家重点聊聊source latency丢失的情况。clock时，首先我们要对一个项目的时钟结构要比较清晰，同时针对一些复杂的生成时钟，我们也要学会画波形图进行分析；接下来，我们就来看看哪些case会导致source latency丢失。

Swift3.0 实现模态/非模态loading框和toast

brycegao321的博客

01-09

4321

动态判断UILable高度、宽度，使用swift3.0实现toast、loading框效果

老版QQ原生表情gif动态

这是老版的QQ表情，不过全是动态的的，Windows照片查看器是不会动的，可以右击用浏览器打开查看，再说一遍是老版的，只是分享给宁愿用老版也要动态的人。

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具，可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

04 添加 loading 加载

everfoot的博客

09-23

1337

如果在延时期间有新的请求发起，这时会在新的请求发起前清除定时器，因此不会执行定时器内部清除 loading。（若不为空，则表明有 loading，无需再添加一个 loading）。然后，我们将一个请求标识添加到队列中。通过设置一个短暂的延时（例如 100 毫秒），我们可以确保。接下来，我们检查队列的长度。如果队列为空，说明当前没有进行中的请求，因此我们需要显示。方法中，我们首先检查是否有定时器存在，并清除它。目前在发送请求时，请求发送之前会展示。中，我们初始化了一个空数组。，用来存储请求的标识。

IEM模型，地表粗糙度模拟

利用微波反演土壤水分时候，利用IEM模型可以实现对随机地表的模拟

vue elementui 弹框确定后加上loading提示

qq_27806371的博客

06-20

2884

vue elementui 弹框确定后加上loading提示

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能：商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传，基本资料下载，开钱箱、小票打印、收款结算，支持多币种付款方式（现金、储值卡、礼券、微信等）,支持多种促销。运行环境：.net 4.0登陆信息用户名:1001 密码:123456内置商品信息，商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏相关源码待公开

调用flutter的Loading框

m0_52467614的博客

10-11

1197

代码出自《Flutter实战·第二版》，7.7.5 其他类型的对话框，2. Loading框。下面的代码构造了一个Loading框，用下面的代码进行调用。

vant-list一直显示loading框

qq1722377628的博客

04-27

7844

网上的问题多是页面一直loading数据，而我的问题却是加载完之后还是显示“正在加载…” 问题根源：在项目中由于很多页面使用了List，所以我封装了一个vant-list组件。也就是这个万恶的组件害我忙活了一上午。代码太多我贴部分出来。先概括一下代码意思，方便大家阅读：（父组件给vant-list组件通过v-bind的方式传递值，vant-list通过pops接收，为了防止vant-list...

Elementui中的上传组件添加Loading加载

qq_43364241的博客

09-15

1万+

项目场景：在 Elementui 的 upload 组件添加 loading 组件解决方案： 1.添加标识控制 loading 的开关 2.在 upload 组件中添加代码 3.当上传方法成功或者失败的时候关闭 loading

Flutter之Loading框

小小熊的博客

07-24

3553

Flutter之Loading框创建一个loading框 class LoadingDialog extends Dialog { @override Widget build(BuildContext context) { return Center( child: Material( color: Colors.black38, child: Center( child: SizedBox( wid

实现一个vuex-loading插件

w候人兮猗

11-08

1280

前言在项目中，如何管理loading是一个很头疼的方式，有的是在请求封装里去做了一个全屏loading，有的是在单页面中管理一个loading，比如如下： data(){ return{ loading:false } }, methods:{ async change(){ this.loading = true // 执...

利用Bootstrap 模态框（Modal）实现loading框效果

藏经阁

11-05

1万+

利用Bootstrap 模态框（Modal）实现loading框效果 <div class="modal fade" id="loadingModal" backdrop="static" keyboard="false"> 　　 <div style="width: 200px;height:100px; z-index: 20000; position: ...

vue项目中使用mint-ui添加loading

Hero_rong的博客

03-11

5474

如图，在vue项目中使用mint-ui添加loading图标方法： 1.下载 npm install mint-ui -S 2.在 main.js 引入样式 import 'mint-ui/lib/style.css'; 3.在需要vue组件中引入 import { Indicator } from 'mint-ui'; 调用 Indicator....

【Elementui】组件库使用Table 表格组件为每一行的按钮添加loading效果

m0_63762148的博客

06-05

6047

button按钮单独设置loading状态

vue路由切换loading_Vue通过状态为页面切换添加loading、为ajax加载添加loading

weixin_39516956的博客

12-21

1446

以下方法需要引入vuex，另使用了vux的UI框架，ajax添加loading还引入了axios。一、为页面切换添加loading。loading.js：import Vue from 'vue'import Vuex from'vuex'import router from'./router'Vue.use(Vuex)const store= new Vuex.Store({}) //这里你可能...