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
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| spinning | boolean | true | 是否显示 |
| size | 'small' | 'default' | 'large' | 'default' | 尺寸 |
| tip | string | — | 指示器下方的说明 |
| delay | number | 0 | 延迟显示(毫秒),避免快任务闪屏 |
| fullscreen | boolean | false | 全屏覆盖 |
Slots
| 名称 | 说明 |
|---|---|
| default | 被包裹的内容(容器内嵌模式) |
| indicator | 自定义旋转图形(替代内置四点动画) |