Skip to content

Spin 加载中

加载状态的占位指示器。

何时使用

  • 异步加载需要 0.5 – 2 秒,给用户一个"正在处理"的反馈。
  • 区块级 loading:在表格 / 卡片 / 表单上覆盖加载态。
  • 全屏 loading:路由切换或重要异步任务。

基本使用

不带任何参数即可显示一个旋转指示。

不同尺寸

size 接受 small / default / large

加上提示文字

tip 在指示器下方加一行说明,让等待原因更明确。

容器内嵌

包裹任意子元素后,spinning=true 时在子元素上方覆盖一层加载蒙板。

延迟显示

delay 让 loading 在异步任务很快完成时根本不闪一下,避免"闪屏"。

全屏模式

fullscreen 把 Spin 提到 body 顶层、覆盖整屏,常用于路由切换或重要异步操作。

自定义指示器

#indicator slot 完全接管旋转图形,可以用 emoji、纯文字、或任何带动画的 VNode。

关闭后展示内容

spinning=false 时遮罩消失,内容完整可见;切换按钮观察过渡。

异步请求业务

实际请求里用 try/finally 把 loading 复位,保证异常路径也能解开。

包裹表格

表格上方放 toolbar、外层套 Spin,是后台管理最常见的写法。

多 Spin 互不干扰

每个 Spin 都是独立挂载,可以在网格里分别控制——单独刷新某张卡片不会让相邻卡片闪一下。

API

Props

参数类型默认值说明
spinningbooleantrue是否显示
size'small' | 'default' | 'large''default'尺寸
tipstring指示器下方的说明
delaynumber0延迟显示(毫秒),避免快任务闪屏
fullscreenbooleanfalse全屏覆盖

Slots

名称说明
default被包裹的内容(容器内嵌模式)
indicator自定义旋转图形(替代内置四点动画)

Released under the MIT License.