Vue全局Loading组件通过组合式API封装useLoading服务并挂载为$loading，支持show/hide控制显隐，配合teleport渲染至body、props配置及CSS动画实现轻量易用的加载遮罩。
在 Vue 项目中，全局 Loading 组件通常用于请求发起时显示遮罩层和加载动画，避免用户重复操作。实现的关键是：用一个响应式状态控制显隐，配合插槽定制内容，并通过 provide/inject 或 Vuex/Pinia 实现跨组件调用，但最轻量的方式是用 事件总线 + 全局 mixin 或直接封装为可复用的 v-loading 指令 —— 这里我们采用更直观、易维护的 组合式 API + 全局属性挂载 方式。
1. 创建 Loading 组件（Loading.vue）
组件本身是纯 UI，支持遮罩、居中、动画，且可通过 props 控制是否全屏、是否禁用背景点击关闭等：
- 使用
defineProps接收visible（必传）、fullscreen、text等配置 - 用
teleport渲染到 body 下，确保层级最高 - 添加 CSS 动画（如旋转 icon）和过渡效果（fade-in/fade-out）
示例结构：
<template>
<teleport to="body">
<div v-if="visible" class="loading-overlay" :class="{ 'fullscreen': fullscreen }">
<div class="loading-content">
<div class="loading-spinner"></div>
<div v-if="text" class="loading-text">{{ text }}</div>
</div>
</div>
</teleport>
</template>
2. 封装 Loading 服务（useLoading.js）
用 Composition API 封装一个可复用的 loading 状态管理逻辑，暴露 show() 和 hide() 方法：
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 内部用
ref管理visible状态 - 支持传入配置（如
text: '加载中…'），并合并默认值 - 返回一个对象，包含
visible、show、hide、toggle
这样任意组件中都能按需调用：const { show, hide } = useLoading()
3. 全局挂载，方便 anywhere 调用
在 main.js 中创建实例并挂载到 app.config.globalProperties，同时提供 $loading 属性：
import { createApp } from 'vue'
import App from './App.vue'
import { createLoading } from './composables/useLoading'
const app = createApp(App)
const loading = createLoading()
app.config.globalProperties.$loading = loading
app.provide('loading', loading) // 同时 provide，供 inject 使用
之后在任何组件的 setup 或 Options API 中，都能直接写：this.$loading.show() 或 const { show } = inject('loading')
4. 使用示例：请求前显示，响应后隐藏
结合 Axios 请求，推荐封装一个带 loading 的请求函数，或在业务组件中手动控制：
- Options API：
mounted() { this.$loading.show({ text: '提交中' }); api.submit().finally(() => this.$loading.hide()); } - Composition API：
const { show, hide } = getCurrentInstance()?.appContext.app.config.globalProperties.$loading || {}（更推荐用 provide/inject 或导入 useLoading） - 进阶可加防抖：连续多次
show()不重复触发，hide()仅在无 pending 请求时生效
不复杂但容易忽略：记得在 Loading 组件中监听 ESC 键关闭（可选），以及设置 pointer-events: none 防止遮罩拦截底层交互（若需点击穿透）。
