@sparta-utils/progress-global-loading

基于 Vue 3 + Element Plus 的全屏进度加载组件插件，可通过命令式方式调用。适用于数据加载、文件上传、初始化等场景，支持动态更新进度与自定义提示。

📦 安装

npm install @sparta-utils/progress-global-loading
# 或者使用 yarn
yarn add @sparta-utils/progress-global-loading

⚠️ 注意：该插件依赖于 element-plus，你需要在项目中安装并引入 Element Plus。

npm install element-plus

🛠 使用方式

1. 按需引入并使用（推荐）

import { GlobalLoading } from '@sparta-utils/progress-global-loading';

// 打开加载
const loading = GlobalLoading.service({
  percentage: 20,
  label: '数据加载中...'
});

// 更新加载进度
setTimeout(() => {
  loading.update({ percentage: 60 });
}, 1000);

// 关闭加载
setTimeout(() => {
  loading.close();
}, 3000);

2. 全局注册（用于多处频繁调用）

你也可以将其封装为全局方法，例如在 main.ts 中挂载到 app.config.globalProperties 上：

import { createApp } from 'vue';
import App from './App.vue';
import { GlobalLoading } from '@sparta-utils/progress-global-loading';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

app.use(ElementPlus);

// 全局挂载
app.config.globalProperties.$globalLoading = GlobalLoading;

app.mount('#app');

3. 局部注册使用方式（组合式 API）

如果你不想挂到全局，也可以在某个组件中直接导入：

<script setup lang="ts">
import { GlobalLoading } from '@sparta-utils/progress-global-loading';

const loading = GlobalLoading.service({
  percentage: 30,
  label: '上传文件中...'
});

setTimeout(() => {
  loading.update({ percentage: 90 });
}, 2000);

setTimeout(() => {
  loading.close();
}, 4000);
</script>

⚙️ GlobalLoading.service(options) 参数说明

| 参数名 | 类型 | 默认值 | 说明 | | ------------- | ------ | --- | ---------------- | | percentage | number | 0 | 当前加载进度（0 ~ 100） | | label | string | 加载中 | 加载时的文字提示 | | width | number | 200 | 进度圈宽度（像素） | | strokeWidth | number | 10 | 进度条宽度 |

🔧 loading.update(options) 更新进度

更新进度或修改文案提示：

loading.update({
  percentage: 70,
  label: '正在处理...'
});

❌ loading.close() 关闭加载

loading.close();

关闭并移除当前加载组件。

🧩 插件依赖

| 依赖库 | 说明 | | ------------------- | ------------------------ | | vue@^3.x | Vue 3 | | element-plus@^2.x | UI组件库，用于 <el-progress> |