antdesignvue vue3全局loading

这里封装为loading.js文件,代码赋值即可用

import { createApp, h } from 'vue'
import { Spin } from 'ant-design-vue'let instance = null// 定义全屏遮罩样式
const style = {position: 'fixed',left: 0,top: 0,width: '100%',height: '100%',display: 'flex',justifyContent: 'center',alignItems: 'center',background: 'rgba(0, 0, 0, .5)',zIndex: 99999
}function getInstance () {if (!instance) {const vn = createApp({data () {return {show: false,message: 'Loading...',timeoutId: 'loader'}},unmounted () {if (instance && instance.$el) {instance.$el.remove() // 当组件卸载时,从DOM中移除元素以避免内存泄漏}},methods: {loading (val, timeout) {this.show = truethis.message = val || 'Loading...'if (timeout) {this.timeoutId = setTimeout(() => {this.close()}, timeout) // 超时时间单位为毫秒}},close () {clearTimeout(this.timeoutId) // 清除定时器setTimeout(()=>{this.show = false},1000)}},render () {return this.show? h('div', { style }, [h(Spin, { tip: this.message })]): null}})const ele = document.createElement('div')instance = vn.mount(ele)document.body.appendChild(ele)}return instance
}export default {...Spin,show (val, timeout) {getInstance().loading(val, timeout)},hide () {getInstance().close()}
}

封装完成后,可以再其他页面引入
import Spin from ‘./SpinLoader’

Spin.show(‘Loading…’,‘这里可以设置时间例如(1000,或者 ,2000之类的)’)

关闭loading
Spin.hide()

希望朋友们多多关照

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/891676.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python脚本实现通过Vector VN1630A CAN盒子与ECU通信

1 安装 python-can 包 安装命令如下: pip install python-can安装完成后可用下面命令查看是否安装成功及版本。 pip show python-canName: python-can Version: 4.4.2 Summary: Controller Area Network interface module for Python Home-page: https://github.…

Oracle 创建本地用户,授予权限,创建表并插入数据

目录 一. 用户的种类二. 切换session为PDB三. 创建用户并授予权限四. 创建表空间五. 为用户分配默认表空间并指定表空间配额六. 通过创建的用户进行登录七. 创建脚本,简化登录八. 查看用户信息九. 创建表,并插入数据9.1 查看当前用户的schema9.2 插入数据…

普及组集训数据结构--并查集

P1551 亲戚 - 洛谷 | 计算机科学教育新生态 并查集就是把所有相关联的量串成一串珠子,抽象来说就是: 把此类相关联的量当作节点,两个节点之间连接一条无向边,所形成的图 例题算法流程: 在此定义“族长”就是一个树的…

ESP32-S3遇见OpenAI:OpenAI官方发布ESP32嵌入式实时RTC SDK

目录 OpenAI RTC SDK简介应用场景详解智能家居控制系统个人健康助手教育玩具 技术亮点解析低功耗设计快速响应高精度RTC安全性保障开发者指南 最近,OpenAI官方发布了一款针对ESP32-S3的嵌入式实时RTC(实时时钟)SDK,这标志着ESP32-…

JS基础 -- 数组 (对象 / 数组 / 类数组 / 对象数组)的遍历

一、数组: 数组是复杂数据类型,用于存储一组有序的数据。 1、创建数组: ① 使用 new 关键字: let arr new Array() // 创建一个长度为0的空数组 let arrLength new Array(5) // 创建一个长度为5的空数组② 字面量形式&#…

【期末复习】一、操作系统概论

题型 选择题 论述题 综合分析题(计算,证明) 算法分析题(根据程序代码分析) 1.方面 操作系统在计算机系统中主要涉及硬件、软件和数据这三个重要方面。 2.操作系统发展历史 手工操作阶段(1940s) 联机批处理系统阶段(1950s) 脱机批处理系统阶段(1950s) 多道…

基于STM32F103的USART的原理及应用(一)(实现手机BLE和MCU进行通信)

一,查阅数据手册,找到对应的IO口和外设总线并配置好外设源文件 想了解USART的具体原理的小伙伴请进传送门:(总结)STM32中USART原理及应用(PC、BLE、ESP8266通信实现)-CSDN博客 二,打…

业务模型与UI设计

业务数据模型的设计、UI设计这应该是程序设计中不可缺少的部分。做程序设计的前提应该先把这两块设计好,那么,来一个实际案例,看看这2块的内容。 汽车保养记录业务模型与UI设计: 一、【车辆清单】 记录车辆相关的数据&#xff0…

微服务保护—Sentinel快速入门+微服务整合 示例: 黑马商城

1.微服务保护 微服务保护是确保微服务架构可靠、稳定和安全的策略与技术。 在可靠性上,限流是控制进入微服务的请求数量,防止流量过大导致服务崩溃。比如电商促销时对商品详情服务进行流量限制。熔断是当被调用的微服务故障过多或响应过慢时,…

unity学习4:git和SVN的使用差别

目录 1 svn 1.1 操作逻辑 1.2 对应工具 1.3 SVN避免冲突的好习惯 2 git 2.1 git的基础操作逻辑 2.1.1 commit时,提交文件之外的其他文件需要pull 2.1.2 commit时,发现要提交的本地文件和服务器的文件冲突了 2.1.3 pull 时 2.2 对应工具 2.3 …

Docker新手:在tencent云上实现Python服务打包到容器

1 使用docker的原因 一致性和可移植性:Docker 容器可以在任何支持 Docker 的环境中运行,无论是开发者的笔记本电脑、测试服务器还是生产环境。这确保了应用在不同环境中的行为一致,减少了“在我的机器上可以运行”的问题。 隔离性&#xff…

阻抗(Impedance)、容抗(Capacitive Reactance)、感抗(Inductive Reactance)

阻抗(Impedance)、容抗(Capacitive Reactance)、感抗(Inductive Reactance) 都是交流电路中描述电流和电压之间关系的参数,但它们的含义、单位和作用不同。下面是它们的定义和区别: …

入门网络安全工程师要学习哪些内容【2025年寒假最新学习计划】

🤟 基于入门网络安全/黑客打造的:👉黑客&网络安全入门&进阶学习资源包 大家都知道网络安全行业很火,这个行业因为国家政策趋势正在大力发展,大有可为!但很多人对网络安全工程师还是不了解,不知道网…

智联视频超融合平台:电力行业的智能守护者

文章目录 一、远程实时监控与设备状态监测二、提高应急响应能力三、实现无人值守与减员增效四、保障电力设施安全与防范外部破坏五、提升电网运行管理效率与决策科学性六、助力电力企业数字化转型与智能化发展七、智联视频超融合平台 在当今数字化浪潮下,视频联网平…

带虚继承的类对象模型

文章目录 1、代码2、 单个虚继承3、vbptr是什么4、虚继承的多继承 1、代码 #include<iostream> using namespace std;class Base { public:int ma; };class Derive1 :virtual public Base { public:int mb; };class Derive2 :public Base { public:int mc; };class Deri…

信号的产生、处理

一、信号的概念 信号是linux系统提供的一种&#xff0c;向指定进程发送特定事件的方式。收到信号的进程&#xff0c;要对信号做识别和处理。信号的产生是异步的&#xff0c;进程在工作过程中随时可能收到信号。 信号的种类分为以下这么多种&#xff08;用指令kill -l查看&…

如何在 Windows 10/11 上录制带有音频的屏幕 [3 种简单方法]

无论您是在上在线课程还是参加在线会议&#xff0c;您都可能需要在 Windows 10/11 上录制带有音频的屏幕。互联网上提供了多种可选方法。在这里&#xff0c;本博客收集了 3 种最简单的方法来指导您如何在 Windows 10/11 上使用音频进行屏幕录制。请继续阅读以探索&#xff01; …

卸载干净 IDEA(图文讲解)

目录 1、卸载 IDEA 程序 2、注册表清理 3、残留清理 1、卸载 IDEA 程序 点击屏幕左下角 Windows 图标 -> 设置-控制面板->intellij idea 勾选第一栏 Delete IntelliJ IDEA 2022.2 caches and local history&#xff0c;表示同时删除 IDEA 本地缓存以及历史。 Delete I…

STM32-笔记34-4G遥控灯

4G接线 一、项目需求 服务器通过4G模块远程遥控开关灯。 二、项目实现 复制项目文件夹38-wifi控制风扇项目 重命名为39-4G遥控点灯 打开项目文件 加载文件 main.c #include "sys.h" #include "delay.h" #include "led.h" #include "ua…

Frontend - 分页(针对 python / Django )

目录 一、同个文件内&#xff08;方式一&#xff09; 1. 前端 html 2. 定义分页界面 3. 获取分页数据 4.后端根据前端分页需求&#xff0c;整理分页数据 5.显示情况 6. JsonResponse 相关知识 二、不同文件内依旧有效&#xff08;方式二&#xff0c;更优化&#xff09;…