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,一经查实,立即删除!

相关文章

WPF的一些控件的触发事件记录

<c1:C1ComboBox Width"230" ItemsSource"{Binding ReplaceWayList}" Style"{StaticResource ListSearch-C1ComboBox}" SelectedValueChanged"C1ComboBox_SelectedValueChanged"&#xff0c; 下拉框事件&#xff0c;SelectedValu…

设计模式-创建型设计模式总结

创建型设计模式&#xff08;Creational Design Patterns&#xff09;是 设计模式 中的一类&#xff0c;专注于如何实例化对象或类。它们提供了一些优雅的方式来创建对象&#xff0c;允许程序在对象创建过程中更灵活地进行管理&#xff0c;从而提高系统的扩展性和维护性。 创建…

Transformer算法实现IMDB文本分类任务和WMT14机器翻译任务

Transformer算法详解与PyTorch实现 目录 Transformer算法详解与PyTorch实现1. Transformer算法简介1.1 Transformer的优势1.2 Transformer的应用场景2. Transformer的核心组件2.1 自注意力机制(Self-Attention)2.2 多头注意力机制(Multi-Head Attention)2.3 位置编码(Posi…

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

1 安装 python-can 包 安装命令如下&#xff1a; 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.…

React虚拟DOM:理解和应用

写在前面 在现代前端开发中&#xff0c;React 是一个非常流行的 JavaScript 库&#xff0c;用于构建用户界面。它引入了一个名为“虚拟 DOM”&#xff08;Virtual DOM&#xff09;的概念&#xff0c;这个概念对于 React 的高效性能和易用性至关重要。本文将深入探讨 React Vir…

VSCode 插件全解析:解锁编码新维度

文章目录 前言一、插件的重要性二、插件分类三、创建自己的插件结语 前言 Visual Studio Code&#xff08;简称 VSCode&#xff09;是一款由微软开发的免费开源文本编辑器&#xff0c;支持多种编程语言和各种扩展插件。它以其轻量级、跨平台和强大的可定制性而闻名&#xff0c…

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

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

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

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

pytorch张量高级索引介绍

PyTorch 中&#xff0c;张量索引操作可以使用高级索引&#xff08;advanced indexing&#xff09;&#xff0c;其中索引可以是另一个张量。使用这种索引方式时&#xff0c;返回值的维度由索引张量的形状和原始张量的形状共同决定。以下是具体的规则和解释&#xff1a; 1. 基本…

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

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

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

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

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

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

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

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

如何在Java开发中选择适合的高性能工具库?

如何在Java开发中选择适合的高性能工具库&#xff1f; 在 Java 开发中选择适合的高性能工具库需要综合考虑多个因素&#xff0c;以下是详细的步骤和要点&#xff1a; 一、明确项目需求 功能需求 首先要确定项目需要的功能。例如&#xff0c;如果主要是进行 JSON 数据处理&a…

2025 小模型技术:驱动低代码与物联网融合发展新引擎

在科技的前沿赛道上&#xff0c;我们满怀期待地迈向 2025 年。这一年&#xff0c;小模型技术宛如一颗璀璨的新星&#xff0c;将在低代码与物联网的浩瀚星空中闪耀出独特光芒&#xff0c;成为引领二者融合发展的强劲引擎&#xff0c;为各行业的数字化变革带来澎湃动力与无限可能…

业务模型与UI设计

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

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

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

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

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

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

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

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

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