Spin 加载中

用于页面或区域的加载状态，支持独立使用和包裹内容两种模式。

基础用法

独立使用时仅渲染旋转图标，支持三种尺寸。

sm / md / lg 三种尺寸

vue

<script setup lang="ts">
import { ASpin } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: center">
    <ASpin size="sm" />
    <ASpin size="md" />
    <ASpin size="lg" />
  </div>
</template>

带提示文字

加载中...

数据处理中，请稍候

spinner + tip 文字

vue

<script setup lang="ts">
import { ASpin } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; gap: 32px; align-items: center">
    <ASpin tip="加载中..." />
    <ASpin size="lg" tip="数据处理中，请稍候" />
  </div>
</template>

包裹内容

传入默认插槽时，spinning=true 会在内容上方覆盖半透明遮罩并模糊内容。

加载中...

这是被遮罩的内容区域。

spinning 为 true 时显示半透明遮罩 + 模糊效果。

包裹内容区域

vue

<script setup lang="ts">
import { ref } from "vue";
import { ASpin, AButton } from "@lite-code/aui-vue";

const loading = ref(true);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <ASpin :spinning="loading" tip="加载中...">
      <div
        style="
          padding: 24px;
          border: 1px solid var(--aui-border, #e2e2e3);
          border-radius: 8px;
          min-height: 120px;
        "
      >
        <p style="margin: 0">这是被遮罩的内容区域。</p>
        <p style="margin-top: 8px; color: var(--aui-text-secondary, #888)">
          spinning 为 true 时显示半透明遮罩 + 模糊效果。
        </p>
      </div>
    </ASpin>
    <AButton size="sm" variant="secondary" @click="loading = !loading">
      {{ loading ? "停止加载" : "开始加载" }}
    </AButton>
  </div>
</template>

API

Props

属性	类型	默认值	说明
spinning	boolean	true	是否处于加载状态
size	'sm' | 'md' | 'lg'	'md'	图标尺寸（16 / 24 / 36 px）
tip	string	—	旋转图标下方的提示文字
class	string	—	自定义类名
style	object	—	自定义样式

Slots

插槽	说明
default	有内容时进入包裹模式，显示遮罩覆盖子元素