Vue.js 实现一个简单的全局 Loading 组件-Vue.js-PHP中文网

vue全局loading组件通过组合式api封装useloading服务并挂载为$loading，支持show/hide控制显隐，配合teleport渲染至body、props配置及css动画实现轻量易用的加载遮罩。

vue.js 实现一个简单的全局 loading 组件

在 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() 方法：

内部用 ref 管理 visible 状态
支持传入配置（如 text: '加载中…'），并合并默认值
返回一个对象，包含 visible、show、hide、toggle

这样任意组件中都能按需调用：const { show, hide } = useLoading()

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

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 防止遮罩拦截底层交互（若需点击穿透）。