做网站都要掌握什么上海seo关键词优化
大家好，我是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(