X-Next

Appearance

Spin 加载中 ​

用于局部区域或页面等待状态。

何时使用 ​

  • 页面、卡片、表格等区域正在等待异步数据。
  • 操作提交后需要短暂阻止用户继续操作当前区域。
  • 需要用提示文本降低等待过程中的不确定感。

基础用法 ​

加载中
vue
<template>
  <x-spin />
  <x-spin tip="加载中" />
</template>

尺寸 ​

处理中
vue
<template>
  <x-spin :size="16" />
  <x-spin :size="24" />
  <x-spin :size="36" tip="处理中" />
</template>

容器模式 ​

加载中
vue
<template>
  <x-button size="small" @click="loading = !loading">
    {{ loading ? '结束加载' : '开始加载' }}
  </x-button>
  <x-spin :loading="loading" display="block" tip="加载中">
    <div class="panel">
      <strong>内容区域</strong>
      <p>加载时遮罩会覆盖内容，并暂时阻止内部控件聚焦。</p>
      <x-button size="small">区域操作</x-button>
    </div>
  </x-spin>
</template>

<script setup lang="ts">
import { ref } from 'vue';

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

点状动画 ​

同步中
vue
<template>
  <x-spin dot />
  <x-spin dot="color" />
  <x-spin dot="color" :size="10" tip="同步中" />
</template>

隐藏图标 ​

正在连接服务
正在保存
vue
<template>
  <x-spin hide-icon tip="正在连接服务" />
  <x-spin :loading="true" display="block" hide-icon tip="正在保存">
    <div class="panel">表单内容</div>
  </x-spin>
</template>

自定义内容 ​

⌁
自定义图标
自定义元素
请稍候，正在处理
vue
<template>
  <x-spin tip="自定义图标">
    <template #icon>
      <span class="custom-icon">⌁</span>
    </template>
  </x-spin>
  <x-spin tip="自定义元素">
    <template #element>
      <span class="custom-loading" aria-hidden="true"></span>
    </template>
  </x-spin>
  <x-spin>
    <template #tip>
      <span>请稍候，正在处理</span>
    </template>
  </x-spin>
</template>

交互说明 ​

  • 容器模式下，loading 为 true 时会显示遮罩，并给内容区域加上不可聚焦状态。
  • Spin 根节点默认带有加载语义；没有提示文本时会使用默认可访问名称。
  • icon 插槽会向第一个组件注入 spin 属性；若传入普通元素，可自行添加动画样式，或使用 element 插槽完全自定义。

按需导入 ​

ts
import { Spin } from 'x-next';

Props ​

参数说明类型默认值
display容器显示方式'block' | 'inline''inline'
size图标或点状动画单点尺寸number-
loading是否为加载中状态，仅容器模式下覆盖内容booleanfalse
dot是否使用点状动画boolean | 'default' | 'color'false
tip提示内容string-
hideIcon是否隐藏图标booleanfalse

Slots ​

插槽名说明
default容器模式下的内容
icon自定义图标，会向第一个组件注入 spin 属性
element自定义加载元素
tip自定义提示内容