Vue3 Loading Component

一个美观、灵活的 Vue 3 Loading 加载组件库。

特性

• 🎨 多种加载动画类型：Spinner、Dots、Pulse、Wave
• 🎯 支持组件、指令、服务三种使用方式
• 🎨 可自定义颜色、背景、文字
• 📦 支持全屏和局部加载
• 💪 完整的 TypeScript 支持
• 🔧 轻量级，无依赖

安装

npm install vue3-loading-component

使用方法

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import VueLoading from 'vue3-loading-component'
import 'vue3-loading-component/dist/style.css'

const app = createApp(App)
app.use(VueLoading)
app.mount('#app')

1. 组件方式

<template>
  <div class="container">
    <VLoading 
      :visible="loading" 
      text="加载中..." 
      type="spinner"
      color="#409eff"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(true)
</script>

2. 指令方式 (v-loading)

<template>
  <div v-loading="loading" class="container">
    内容区域
  </div>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(true)
</script>

3. 服务方式

import { LoadingService } from 'vue3-loading-component'

// 打开 loading
const loading = LoadingService.open({
  target: '.container', // 目标元素，默认为 body
  text: '加载中...',
  type: 'dots',
  fullscreen: false
})

// 关闭 loading
loading.close()

// 修改文字
loading.setText('即将完成...')

// 全屏 loading
const fullscreenLoading = LoadingService.open({
  fullscreen: true,
  text: '全屏加载中...',
  background: 'rgba(0, 0, 0, 0.7)',
  color: '#fff'
})

API

Props

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | visible | 是否显示 | boolean | false | | text | 加载文字 | string | '' | | type | 加载动画类型 | 'spinner' | 'dots' | 'pulse' | 'wave' | 'custom' | 'spinner' | | fullscreen | 是否全屏 | boolean | false | | background | 遮罩背景色 | string | 'rgba(255, 255, 255, 0.9)' | | color | 加载动画颜色 | string | '#409eff' |

LoadingService Options

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | target | 目标元素 | HTMLElement | string | document.body | | text | 加载文字 | string | '' | | type | 加载动画类型 | string | 'spinner' | | fullscreen | 是否全屏 | boolean | false | | background | 遮罩背景色 | string | 'rgba(255, 255, 255, 0.9)' | | color | 加载动画颜色 | string | '#409eff' |

LoadingService Methods

| 方法 | 说明 | 参数 | |------|------|------| | open | 打开 loading | options: LoadingOptions | | close | 关闭指定 loading | target?: HTMLElement | string | | closeAll | 关闭所有 loading | - |

加载类型预览

• spinner: 圆形旋转加载
• dots: 三点跳动加载
• pulse: 脉冲扩散加载
• wave: 波浪加载

License

MIT