以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!

图片

大家好,我是CodeQi! 

项目开发中,Loading 的展示与关闭是非常关键的用户体验设计。

当我们的应用需要发起多个异步请求时,如何有效地管理全局 Loading 状态,保证用户在等待数据加载时能有明确的反馈,这是一个值得深入探讨的问题。

本文将以 Vue 3 项目为例,详细讲解如何全局封装 Loading 的展示与关闭。

一、准备工作

首先,我们需要创建一个新的 Vue 3 项目。如果你还没有安装 Vue CLI,请先安装:

npm install -g @vue/cli

然后创建并进入新项目:

vue create loading-demo
cd loading-demo

确保你的项目中已经安装了 Vue 3 和 Vue CLI。

我们将使用 <script setup> 的写法来实现全局 Loading 组件。

二、封装全局 Loading 组件

1. 创建全局 Loading 组件

首先,我们在 src/components 目录下创建一个名为 GlobalLoading.vue 的组件文件:

<!-- src/components/GlobalLoading.vue -->
<template>
  <div v-if="visible" class="global-loading">
    <div class="spinner"></div>
  </div>
</template><script setup>
import { ref }from'vue'// 定义一个可响应的变量来控制 Loading 的可见性
const visible =ref(false)// 导出显示和隐藏 Loading 的方法
exportconstshowGlobalLoading=()=>{ visible.value=true}
exportconsthideGlobalLoading=()=>{ visible.value=false}
</script><style scoped>
.global-loading {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
background:rgba(

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

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

相关文章

eventloop 事件循环机制 (猜答案)

// eventloop 事件循环机制// console.log(555);setTimeout(() > {console.log(666);})let p new Promise((resolve,reject)>{// 同步执行console.log(111);resolve();});// promise 的回调函数是异步的微任务p.then(v > {console.log(222);}, r > {console.log(r…

STMF4学习笔记(天空星)

前言&#xff1a;本篇笔记参考嘉立创文档&#xff0c;连接放在最后 #RTC相关概念定义 Real-Time Clock 缩写 RTC 翻译 实时时钟&#xff0c;是单片机片内外设的一种&#xff0c;作用于提供准确的时间还有日期&#xff0c;这个外设有独立的电源&#xff0c;当单片机停止供电…

Java同步包装器

通过 Collections.synchronizedList() 方法将一个普通的 ArrayList 包装成了线程安全的 List&#xff1a; import java.util.*;public class SynchronizedWrapperExample {public static void main(String[] args) {// 创建一个非线程安全的 ArrayListList<String> list…

AzureDataFactory Dataverse connector自动处理了分页问题(单次查询上限5000条的限制)

众所周知&#xff0c;在用fetch执行D365的查询时&#xff0c;单次的查询是5000条&#xff0c;如果超过5000条则需要自己处理分页&#xff0c;添加额外的处理逻辑&#xff0c;但在ADF中&#xff0c;Dataverse connector已经自动处理了分页&#xff0c;我们可以很简单的做个POC. …

计算机网络——数据链路层(点对点协议PPP)

点对点协议PPP的概述 对于点对点的链路&#xff0c;目前使用得最广泛的数据链路层协议是点对点协议 PPP (Point-to-Point Protocol)。 它主要应用于两个场景&#xff1a; 用户计算机与ISP之间的链路层协议就是点对点协议 PPP&#xff0c;1999年公布了回以在以太网上运行的PPP协…

【教程】lighttpd配置端口反向代理

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 1、修改配置文件&#xff1a; sudo vim /etc/lighttpd/lighttpd.conf2、先添加mod_proxy&#xff1a; 3、然后添加端口映射&#xff1a; 4、保存&…

耗材分类功能解析:智慧校园的必备利器

在智慧校园的资产管理架构中&#xff0c;耗材分类功能是确保日常运营物资有效管理的关键组成部分&#xff0c;它致力于提高耗材使用的效率和经济性。此功能通过智能化、精细化的管理手段&#xff0c;对校园内各种易耗品进行科学分类与跟踪。 耗材分类功能首先建立在对校园日常运…

C++ 实现QT信号槽

https://github.com/libsigcplusplus/libsigcplusplus #include <iostream>/* 在sigslot.h的420,将&#xff1a; //typedef sender_set::const_iterator const_iterator; 改为&#xff1a; //typedef typename sender_set::const_iterator const_iterator;#include <…

Softing助力工业4.0 | 通过OPC UA和MQTT访问SINUMERIK 840D CNC控制器数据

Softing uaGate 840D是用于采集西门子SINUMERIK 840D SL/PL CNC控制器数据的物联网网关&#xff0c;支持OPC UA服务器和MQTT发布功能。该网关提供对SINUMERIK 840D CNC控制器机床数据的访问&#xff0c;支持读取、处理重要的主轴和从轴数据&#xff0c;例如扭矩和功耗&#xff…

C++——stack和queue类用法指南

一、stack的介绍和使用 1.1 stack的介绍 1、stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行插入与提取操作 2、stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其底层的容器&am…

Halcon OCR字符识别(极坐标转换,字符识别)

Halcon OCR字符识别&#xff08;极坐标转换&#xff0c;字符识别&#xff09; 代码 * 1.加载图片 *************************************************** dev_close_window () read_image (Image, ./img) get_image_size (Image, Width, Height) dev_get_window (WindowHandle…

Vue移动端地图App:van-uploader导致的卡顿问题

问题描述 基于Vue3+Vant IU 4开发的移动端地图App,在进行地图点位上报、上报记录查看过程中,出现App卡顿、甚至闪退的问题,进行问题定位之后,发现是van-uploader组件导致的问题。 van-uploader文件上传组件 van-uploader组件用于将本地的图片或文件上传至服务器,并在上传…

智慧课堂基于YOLOv8的学生上课行为检测

数据集 学生上课行为检测&#xff0c;我们直接使用公开数据集 共三类行为&#xff1a;举手、读书、写字 数据集已经按照YOLO格式配置好&#xff0c;数据内容如下 模型训练 ​ 采用YOLOv8模型进行训练&#xff0c;官方代码 首先是划分数据集&#xff0c;分为训练集、验证&a…

QT创建地理信息shp文件编辑器shp_editor

空闲之余创建一个简单的矢量shp文件编辑器&#xff0c;加深对shp文件的理解。 一、启动程序 二、打开shp文件 三、显示shp文件的几何图形 四、双击右边表格中的feature&#xff0c;主窗体显示选中feature的各个节点。 五、鼠标在主窗体中选中feature的节点&#xff0c;按鼠标左…

程序员AI提效案例:统计B站课程耗时情况

文章目录 一&#xff0c;时长统计需求二&#xff0c;一波三折三&#xff0c;终极方案 AIJava总结 今天为了写一篇博客&#xff0c;这篇博客介绍了B站的一个Java项目&#xff0c;这个项目分为三个阶段&#xff1a; 初级篇高级篇运维篇 一&#xff0c;时长统计需求 我想根据每个…

从零开始学量化~Ptrade使用教程(二)——主界面及基本功能

主界面 主界面如下图所示&#xff0c;包含标题栏、行情模块、交易模块以及查询模块底部的状态栏。其中交易模块和行情模块之间可拖动&#xff0c;以此来调整交易模块和行情模块大小。 多账号管理 多账号管理功能&#xff0c;实现证券、信用、期权多账号管理&#xff0c;用于支…

鸿蒙数据防泄漏(DLP)【Data Loss Prevention Kit开发指导】

Data Loss Prevention Kit开发指导 DLP是系统提供的系统级的数据防泄漏解决方案&#xff0c;提供一种称为DLP的文件格式。后缀格式为“原始文件名&#xff08;包含原始文件后缀&#xff09;.dlp”&#xff0c;例如: “test.docx.dlp”&#xff0c;文件由授权凭证和原始文件密文…

如何在主动动态安全中使用人工智能驱动的威胁分类提高防御精准度

面对当今世界不断演变的网络威胁&#xff0c;人工智能和网络安全将会发挥重要的防护作用。在数据泄露和网络攻击日益突出的时代&#xff0c;人工智能和网络安全之间的合作成为数字安全战场上的强大盟友。 本文将深入研究这两个领域的融合&#xff0c;揭示它们在彻底改变威胁检测…

C - Tile Distance 2

分析&#xff1a;每穿过一行就会加一 先纵向走&#xff0c;再横向走 统一用砖头的左半部分计算 #include<bits/stdc.h> using namespace std; typedef long long ll; int main(){ ll sx,sy,tx,ty;cin>>sx>>sy>>tx>>ty; if((sxsy)%2!0)…

远程登录WINDOWS10,提示你的凭据不工作

1&#xff1a;想通过远程桌面登录WINDOWS10输入用户名和密码后&#xff0c;出现下面的提示。 2&#xff1a;登录WINDOWS10&#xff0c;在运行中输入gpedit.msc 3&#xff1a;本地组策略编辑器窗口中&#xff0c;依次展开&#xff0c;计算机配置 ---> 管理模版---> 系统--…