ExUI

Appearance

Loading 加载 ​

用于页面和区块的加载中状态。

基础用法 ​

最简单的加载用法。

vue
<template>
  <div style="position: relative; height: 200px;">
    <ExLoading :visible="true" :fullscreen="false" />
  </div>
</template>

不同类型 ​

提供多种加载动画类型。

vue
<template>
  <ExLoading :visible="true" type="spinner" text="Spinner" />
  <ExLoading :visible="true" type="dots" text="Dots" />
  <ExLoading :visible="true" type="pulse" text="Pulse" />
  <ExLoading :visible="true" type="bars" text="Bars" />
  <ExLoading :visible="true" type="neon" text="Neon" />
</template>

不同尺寸 ​

提供三种尺寸：small、medium（默认）、large。

vue
<template>
  <ExLoading :visible="true" size="small" text="Small" />
  <ExLoading :visible="true" size="medium" text="Medium" />
  <ExLoading :visible="true" size="large" text="Large" />
</template>

加载文本 ​

通过 text 属性或默认插槽可以设置加载文本。

vue
<template>
  <ExLoading :visible="true" text="正在加载游戏资源..." />
</template>

自定义加载动画 ​

通过 spinner 插槽可以自定义加载动画。

vue
<template>
  <ExLoading :visible="true" text="自定义加载动画">
    <template #spinner>
      <div style="width: 48px; height: 48px;">
        <img 
          src="https://api.iconify.design/ri/loader-4-line.svg" 
          alt="加载中" 
          style="width: 100%; height: 100%; animation: spin 1s linear infinite;"
        />
      </div>
    </template>
  </ExLoading>
</template>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

全屏加载 ​

设置 fullscreen 为 true 可以全屏显示加载。

vue
<template>
  <ExButton type="primary" @click="showLoading">
    显示全屏加载
  </ExButton>
  <ExLoading v-model:visible="loading" fullscreen type="neon" text="正在加载中..." />
</template>

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

const loading = ref(false)

const showLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000)
}
</script>

无遮罩 ​

设置 mask 为 false 可以不显示遮罩层。

这是背景内容

vue
<template>
  <div >
    <p>这是背景内容</p>
    <ExLoading :visible="true" :mask="false" />
  </div>
</template>

点击遮罩关闭 ​

设置 mask-closable 为 true 可以点击遮罩关闭加载。

vue
<template>
  <ExButton type="primary" @click="showLoading">
    显示可关闭加载
  </ExButton>
  <ExLoading 
    v-model:visible="loading" 
    fullscreen 
    mask-closable 
    text="点击遮罩关闭" 
  />
</template>

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

const loading = ref(false)

const showLoading = () => {
  loading.value = true
}
</script>

容器内加载 ​

在容器内显示加载状态。

数据列表

数据项 1
数据项 2
数据项 3
vue
<template>
  <div style="position: relative;">
    <h3>数据列表</h3>
    <div>数据内容...</div>
    
    <ExLoading 
      v-model:visible="loading" 
      :fullscreen="false" 
      type="bars" 
      text="加载中..." 
    />
  </div>
</template>

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

const loading = ref(false)

const loadData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

API ​

Loading Props ​

属性说明类型默认值
visible / v-model:visible是否显示booleantrue
type加载动画类型'spinner' | 'dots' | 'pulse' | 'bars' | 'neon''spinner'
size加载尺寸'small' | 'medium' | 'large''medium'
text加载文本stringundefined
fullscreen是否全屏显示booleanfalse
mask是否显示遮罩booleantrue
mask-closable点击遮罩是否关闭booleanfalse
aria-label无障碍标签stringundefined

Loading Events ​

事件名说明类型
update:visible显示状态改变时触发(visible: boolean) => void
close关闭时触发() => void

Loading Slots ​

插槽名说明
default加载文本
spinner自定义加载动画

Loading Methods ​

方法名说明类型
getElement获取加载DOM元素() => HTMLDivElement | null
close关闭加载() => void

加载类型说明 ​

类型说明适用场景
spinner旋转圆环通用场景，默认类型
dots跳动点轻量级加载提示
pulse脉冲波纹数据刷新、同步
bars跳动条形音频、视频加载
neon霓虹双环游戏场景，科技感强

无障碍支持 ​

  • 使用 role="alert" 标记
  • 支持 aria-live="polite" 实时通知
  • 支持 aria-label 属性
  • 提供加载状态提示

注意事项 ​

  1. 全屏加载会阻止页面交互，请谨慎使用
  2. 建议设置合理的超时时间，避免长时间加载
  3. 容器内加载需要父元素设置 position: relative
  4. 加载文本应简洁明了，告知用户当前状态