当前位置: 首页 > 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;我们应该要明确自己…...

Pinia Colada:革命性Vue数据获取层的完整入门指南

Pinia Colada&#xff1a;革命性Vue数据获取层的完整入门指南 【免费下载链接】pinia-colada &#x1f379; The smart data fetching layer for Vue 项目地址: https://gitcode.com/gh_mirrors/pi/pinia-colada Pinia Colada是Vue生态系统中一款革命性的数据获取层解决…...

嵌入式TFT屏幕LVGL驱动适配:从硬件抽象到性能优化的全流程实践

1. 项目概述与核心价值最近在几个嵌入式显示项目里&#xff0c;我深度折腾了TFT屏幕与LVGL的适配工作。这活儿听起来像是把两个现成的轮子装到一起&#xff0c;但真上手了才发现&#xff0c;从点亮屏幕到丝滑流畅的UI交互&#xff0c;中间隔着不少“坑”。如果你也在为STM32、E…...

独立开发者如何利用TaotokenTokenPlan降低项目试错成本

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何利用Taotoken TokenPlan降低项目试错成本 对于独立开发者或小型团队而言&#xff0c;启动一个涉及大模型能力的项目…...

J-Link V8变砖别慌!手把手教你用SAM-BA 2.14救活AT91SAM7S64芯片

J-Link V8救砖实战&#xff1a;用SAM-BA 2.14拯救AT91SAM7S64芯片全指南 当你的J-Link V8调试器突然"变砖"——LED灯熄灭、电脑无法识别、所有功能瘫痪时&#xff0c;那种感觉就像外科医生在手术台上突然失去所有仪器。但别急着宣布它的"死亡"&#xff0c;…...

国产多模态大模型“看懂”世界:视觉问答(VQA)全解析

国产多模态大模型“看懂”世界&#xff1a;视觉问答(VQA)全解析 引言 在人工智能浪潮中&#xff0c;让机器“看懂”图片并回答问题的能力&#xff0c;正从科幻走向现实。国产多模态大模型在视觉问答&#xff08;Visual Question Answering, VQA&#xff09;领域异军突起&#x…...

2026届学术党必备的五大降AI率工具解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 每位学者以及学生&#xff0c;在学术研究的这条道路之上&#xff0c;都必然要跨越论文写作这…...

用Gemini3.1Pro高效撰写工作汇报从素材整理到终稿交付全流程

做多模型横向对比测试时常用的聚合平台推荐下&#xff1a;库拉KULAAI&#xff08;c.877ai.cn&#xff09;&#xff0c;上面能直接调Gemini 3.1 Pro和多个主流模型做职场办公场景对比。下面进入正题。工作汇报和周报不是一回事很多人把工作汇报和周报混为一谈。周报是流水线上的…...

国内热门的广州租车工厂哪个好

在广州&#xff0c;租车需求日益增长&#xff0c;如何选择一家靠谱的租车工厂成为众多消费者关心的问题。今天&#xff0c;就为大家介绍一家热门的租车企业——广州市白驹旅游汽车有限公司&#xff08;简称白驹旅汽&#xff09;&#xff0c;并与其他大厂进行对比分析。车辆保障…...

Outfit开源字体深度解析:7大优势助力专业设计

Outfit开源字体深度解析&#xff1a;7大优势助力专业设计 【免费下载链接】Outfit-Fonts The most on-brand typeface 项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts Outfit字体是一款专为品牌设计和数字界面优化的开源几何无衬线字体&#xff0c;提供从Th…...

NotebookLM智能体插件开发:连接AI笔记与外部工具的实现指南

1. 项目概述&#xff1a;当AI笔记助手学会“动手”最近在折腾AI应用开发的朋友&#xff0c;可能都注意到了GitHub上一个挺有意思的项目&#xff1a;amp-rh/notebooklm-agent-plugin。乍一看名字&#xff0c;它像是Google那个实验性AI笔记工具NotebookLM的一个插件。但如果你深入…...