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

以 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(

相关文章:

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

大家好,我是CodeQi! 项目开发中,Loading 的展示与关闭是非常关键的用户体验设计。 当我们的应用需要发起多个异步请求时,如何有效地管理全局 Loading 状态,保证用户在等待数据加载时能有明确的反馈,这是一个值得深入探讨的问题。 本文将以 Vue 3 项目为例,详细讲解如…...

Node.js学习(一)

Node.js安装与入门案例&#xff1a; 需求&#xff1a;点击按钮&#xff0c;请求本地目录指定文件的内容&#xff0c;并显示在页面上 刚入门肯定想着直接写相对路径请求指定路径数据就行了&#xff0c;可是会发现不行。 网页运行在浏览器端&#xff0c;通常后续要发布&#xf…...

Spring Data JPA使用及实现原理总结

Spring Data JPA系列 1、SpringBoot集成JPA及基本使用 2、Spring Data JPA Criteria查询、部分字段查询 3、Spring Data JPA数据批量插入、批量更新真的用对了吗 4、Spring Data JPA的一对一、LazyInitializationException异常、一对多、多对多操作 5、Spring Data JPA自定…...

【C语言】extern 关键字

在C语言中&#xff0c;extern关键字用于声明一个变量或函数是定义在另一个文件中的。它使得在多个文件之间共享变量或函数成为可能。extern关键字常见于大型项目中&#xff0c;通常用于声明全局变量或函数&#xff0c;这些变量或函数的定义位于其他文件中。 基本用法 变量声明…...

Linux--V4L2应用程序开发(二)改变亮度

一、思路流程 创建一个新线程用来控制亮度&#xff0c;线程通过读取用户输入来增加或减少亮度值&#xff0c;并使用 ioctl 函数将新亮度值设置到视频设备。 二、代码 /*创建线程来控制亮度*/ pthread_t thread; pthread_create(&thread, NULL, thread_brightness_contrl…...

[Gstreamer] 消息处理handler的设置

前言&#xff1a; Gstreamer 提供以 GstMessage 和 GstBus 为基础的消息传递机制&#xff0c;所有GstMessage 发送的时候都需要指定 GstBus 用来明确当前 message 将在哪条 Bus 上流转。所有的 GstMessage 最终都会进入一个handler&#xff0c;这个handler函数可以通过两种方式…...

线性代数笔记

行列式 求高阶行列式 可以划上三角 上三角 余子式 范德蒙行列式 拉普拉斯公式 行列式行列对换值不变 矩阵 矩阵的运算 同型矩阵加减 对应位置相加减 矩阵的乘法 左边第 i 行 一次 相乘求和 右边 第 j 列 eg 中间相等 两边规模 矩阵的幂运算 解题思路 找规律 数学归纳…...

未公开 GeoServer开源服务器wfs远程命令执行漏洞 已复现(CVE-2024-36401)

0x01 阅读须知 技术文章仅供参考&#xff0c;此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成…...

【WebGIS干货分享】Webgis 面试题-浙江中海达

1、Cesium 中有几种拾取坐标的方式&#xff0c;分别介绍 Cesium 是一个用于创建 3D 地球和地理空间应用的 JavaScript 库。在 Cesium 中&#xff0c;你可以使用不同的方式来拾取坐标&#xff0c;以便与地球或地图上的对象进行交 互。以下是 Cesium 中几种常见的拾取坐标的方式…...

ES 修改索引字段类型

大体的原理&#xff1a; 1&#xff1a;按照老索引按需修改&#xff0c;新建新索引 2&#xff1a;转移数据&#xff08;数据量大&#xff0c;时间会很长&#xff09; 3&#xff1a;删除老索引 4&#xff1a;给新索引 创建别名 第一步&#xff1a;创建新索引 可以先获取老索引ma…...

恢复的实现技术-日志和数据转储

一、引言 在系统正常运行的情况下&#xff0c;事务处理的恢复机制应采取某些技术措施为恢复做好相应的准备&#xff0c;保证在系统发生故障后&#xff0c;能将数据库从一个不一致的错误状态恢复到一个一致性状态 恢复技术主要包括 生成一个数据库日志&#xff0c;来记录系统中…...

全网最全最细的jmeter接口测试教程,建议收藏

在日常工作中&#xff0c;尤其是做接口测试时&#xff0c;我们最经常用到的两个工具&#xff0c;就是Jmeter和postman。今天&#xff0c;我们主要是讲一讲Jmeter在接口测试这一块的一些方式方法。内容比较多&#xff0c;大家可以收藏一下&#xff0c;以后慢慢学。 1&#xff0…...

Raspbian命令行连接WiFi网络

Raspbian命令行连接WiFi网络 1. 源由2. 环境3. 信号4. 连接5. 检查6. 断开 1. 源由 “懒人”多福&#xff0c;是什么原因&#xff0c;大家知道不&#xff0c;哈哈。 如果大家关注过之前《Ardupilot开源代码之Rover上路计划》&#xff0c;为了笔记本电脑在不断网的情况下进行配…...

王佩丰 Excel 基础二十四讲——目录

前言 跟着B站学习王佩丰 Excel 基础教程&#xff0c;本文章为索引目录 课程传送门&#xff1a;视频地址——点击前往 王佩丰Excel基础教程24讲完整版 第一讲&#xff1a;认识 Excel 第二讲&#xff1a;Excel 单元格格式设置 第三讲&#xff1a;查找替换定位&#xff08;未编辑…...

Qt扫盲-QRect矩形描述类

QRect矩形描述总结 一、概述二、常用函数1. 移动类2. 属性函数3. 判断4. 比较计算 三、渲染三、坐标 一、概述 QRect类使用整数精度在平面中定义一个矩形。在绘图的时候经常使用&#xff0c;作为一个二维的参数描述类。 一个矩形主要有两个重要属性&#xff0c;一个是坐标&am…...

Android系统adb shell怎么执行checksum 来判断文件是否变更?

在Android系统中&#xff0c;通过ADB&#xff08;Android Debug Bridge&#xff09;shell执行checksum&#xff08;校验和&#xff09;来检查文件是否变更是一个常见的需求&#xff0c;尤其是在自动化测试或确保应用文件未被篡改的场景中。在Linux和Android shell中&#xff0c…...

JS中的上下文

一.执行上下文的概念&#xff1a; 执行上下文简称上下文。变量或者函数的上下文决定了它们可以访问哪些数据&#xff0c;以及它们的行为。每一个上下文都具有一个关联的变量对象&#xff0c;而这个上下文中定义的所有变量和函数都存在于这个对象上。 二.JS中上下文的执行机制&a…...

【深度学习】注意力机制

https://blog.csdn.net/weixin_43334693/article/details/130189238 https://blog.csdn.net/weixin_47936614/article/details/130466448 https://blog.csdn.net/qq_51320133/article/details/138305880 注意力机制&#xff1a;在处理信息的时候&#xff0c;会将注意力放在需要…...

安卓开发自定义时间日期显示组件

安卓开发自定义时间日期显示组件 问题背景 实现时间和日期显示&#xff0c;左对齐和对齐两种效果&#xff0c;如下图所示&#xff1a; 问题分析 自定义view实现一般思路&#xff1a; &#xff08;1&#xff09;自定义一个View &#xff08;2&#xff09;编写values/attrs.…...

IT行业入门,如何假期逆袭,实现抢跑

目录 前言 1.IT行业领域分类 2.基础课程预习指南 3.技术学习路线 4.学习资源推荐 结束语 前言 IT&#xff08;信息技术&#xff09;行业是一个非常广泛和多样化的领域&#xff0c;它包括了许多不同的专业领域和职业路径。如果要进军IT行业&#xff0c;我们应该要明确自己…...

基于发布订阅模式的Web实时通信框架hermes-for-web实践指南

1. 项目概述&#xff1a;一个为Web应用注入灵魂的“信使”最近在折腾一个前后端分离的Web项目&#xff0c;遇到了一个老生常谈但又极其磨人的问题&#xff1a;前端页面状态和后端数据更新之间的“延迟”与“不一致”。比如&#xff0c;用户A在后台管理界面删除了一个订单&#…...

骨传导耳机品牌Mojawa完成数千万元A+轮融资,发力AI运动智能平台

硬氪获悉&#xff0c;苏州索迩电子技术有限公司近日完成数千万元人民币的A轮融资&#xff0c;由正海资本领投。资金将用于拓展海外线下渠道和推进产品AI智能化研发。骨传导耳机市场增长显著在音频产品市场&#xff0c;骨传导耳机因无线和开耳式聆听技术需求增加而显著增长。202…...

FreeMove:拯救C盘空间的智能文件迁移工具,告别存储焦虑

FreeMove&#xff1a;拯救C盘空间的智能文件迁移工具&#xff0c;告别存储焦虑 【免费下载链接】FreeMove Move directories without breaking shortcuts or installations 项目地址: https://gitcode.com/gh_mirrors/fr/FreeMove 你是否曾因C盘爆满而被迫删除重要文件&…...

Heightmapper完全指南:5步将全球地形数据变成3D模型

Heightmapper完全指南&#xff1a;5步将全球地形数据变成3D模型 【免费下载链接】heightmapper interactive heightmaps from terrain data 项目地址: https://gitcode.com/gh_mirrors/he/heightmapper 还在为3D地形建模发愁吗&#xff1f;Heightmapper让你的地形创作效…...

用普通光耦TLP521-2实现宽范围线性隔离?一个低成本替代线性光耦的电路设计与实测

用普通光耦TLP521-2实现宽范围线性隔离的工程实践 在工业传感器接口和模拟信号采集领域&#xff0c;信号隔离是确保系统稳定性和安全性的关键技术。传统专用线性光耦&#xff08;如LOC系列&#xff09;虽性能优异&#xff0c;但高昂的成本和有限的线性输出范围&#xff08;通常…...

开源机械爪OpenClaw UBI:从3D打印到Arduino控制的低成本机器人抓取方案

1. 项目概述&#xff1a;一个基于开源硬件的机械爪设计与实现最近在整理工作室的物料时&#xff0c;翻出了几个闲置的步进电机和一堆3D打印件&#xff0c;这让我想起了几年前一个挺有意思的项目——OpenClaw UBI。这是一个在开源硬件社区里流传的、基于通用构建接口&#xff08…...

FakeLocation深度探索:安卓应用级位置伪装的三层架构解析

FakeLocation深度探索&#xff1a;安卓应用级位置伪装的三层架构解析 【免费下载链接】FakeLocation Xposed module to mock locations per app. 项目地址: https://gitcode.com/gh_mirrors/fak/FakeLocation 在数字时代&#xff0c;位置数据已成为个人隐私的敏感边界。…...

小米路由器R3G刷机实战:从官方固件到蜜罐版MT工具箱的保姆级避坑指南

小米路由器R3G深度改造指南&#xff1a;解锁第三方固件的完整路线图 当你盯着家里那台性能日渐吃紧的小米路由器R3G时&#xff0c;是否想过它其实蕴藏着未被发掘的潜力&#xff1f;这款发布于数年前的中端路由器&#xff0c;凭借MT7621双核芯片和128MB内存的硬件基础&#xff0…...

ITK-SNAP医学图像分割:精准医疗影像分析的利器

ITK-SNAP医学图像分割&#xff1a;精准医疗影像分析的利器 【免费下载链接】itksnap ITK-SNAP medical image segmentation tool 项目地址: https://gitcode.com/gh_mirrors/it/itksnap 面对复杂的医学影像数据&#xff0c;如何快速准确地进行三维解剖结构分割&#xff…...

简单三步让Windows焕然一新:Winhance中文版完整优化指南

简单三步让Windows焕然一新&#xff1a;Winhance中文版完整优化指南 【免费下载链接】Winhance-zh_CN A Chinese version of Winhance. C# application designed to optimize and customize your Windows experience. 项目地址: https://gitcode.com/gh_mirrors/wi/Winhance-…...