v0.1.9

Spin 加载中

引入import { CONTENT_HEIGHT } from '@apollo-design/ui';

何时使用 {#when-to-use}

显示异步操作的加载状态。spinning由调用者提供,正delay用于延迟出现以减少闪烁;关闭立即生效。

代码演示 {#examples}

API

原生class、style、DOM事件和ARIA属性落在正文根元素,支持当前更新;本组件不声明业务emits或v-model。

参数 说明 类型 默认值
spinning 当前目标加载状态 boolean true
delay 正且有限的毫秒数延迟显示;0、负数和非有限数不延迟 number 0
size 图标大小;middle/default按中号处理,default保留既有告警 'small' | 'medium' | 'middle' | 'large' | 'default' 'medium'
description 文案;#description存在时优先,数字0可见 VNodeChild -
fullscreen 固定全屏覆盖层,正文保持文档流;切换不重挂内容 boolean false
percent 未提供为不定进度;显式数字含0显示圆环并钳制到0–100;auto每200ms估算,非有限数为不定进度 number | 'auto' -
prefixCls 当前类名前缀,自定义CSS需预生成/加载 string 'apollo-spin'
classNames 语义类名;Provider与本地逐槽拼接 SpinSemanticValue<SpinSemanticClassNames> -
styles 语义样式;逐槽浅合并,本地优先;函数收到当前合并props SpinSemanticValue<SpinSemanticStyles> -
tip 既有废弃文案别名,使用description VNodeChild -
wrapperClassName 既有废弃包装类名;默认槽存在或全屏时作用于root string -

插槽

插槽 作用域 说明
default - 正文;条件槽新增/移除时使用当前状态
indicator { percent: number | undefined } 完整Vue内容,支持多节点、Fragment和原生控件;显式绑定子组件的percent,不克隆或注入用户VNode
description - 文案内容;空槽抑制prop且不创建空包装

具名槽按存在性优先,有意为空时抑制Provider和默认值。加载关闭时不消费指示器/文案槽。indicator的scope提供当前数值,auto为估算值,undefined表示不定进度。

Expose与程序化配置

nativeElement为HTMLDivElement或null,指向稳定正文外壳。可通过ConfigProvider的spin配置当前className/style/classNames/styles/indicator;indicator为程序化VNode,保持其原生属性。

Spin.setDefaultIndicator(indicator: VNodeChild)与具名setDefaultIndicator设置模块默认内容;null/undefined重置为内置图标。它不主动调度更新,已挂载实例在下次实际render读取当前默认值。getDefaultIndicator返回当前配置。实例插槽优先于Provider,再使用模块默认值。

Semantic DOM

槽位 实际落点
root 始终承载正文和原生attrs的根div
section 始终为独立加载层;普通、嵌套、全屏切换保持同一节点
indicator 完整指示器容器,样式同时覆盖自定义内容与可见圆环
description 非空文案div
container 默认槽正文容器
tip 既有废弃文案语义别名,使用description
mask 全屏的实际覆盖层,与section为同一元素;关闭时隐藏且inert

root与section样式各自独立;需要定制遮罩时用styles.mask。普通文案使用正文色,全屏文案有可读背景。内置动画遵守theme.token.motion=false和系统减少动画偏好;自定义内容的动画由调用者配置。

主题变量(Design Token){#design-token}

4个Token从当前theme.components.Spin读取,动态配置、移除和恢复均生效,原生根CSS变量优先。contentHeight限制嵌套加载层最大高度,默认400,不强制正文高度且不限制全屏遮罩。

代码演示

加载中…

基础用法 #

spinning默认为true。内置四点图表示不定进度。

加载中…

尺寸 #

三档图标尺寸来自当前dotSizeSM、dotSize和dotSizeLG。嵌套实例拥有自己的尺寸。

加载中…

加载文案 #

description或#description提供当前文案,数字0有效。存在的空槽抑制prop且不创建空包装,关闭加载时不消费文案槽。

加载中…

嵌套模式 #

默认槽承载正文。稳定加载层与正文共享布局区域,加载时正文变淡且不响应指针;空正文也为真实加载内容留出空间。

加载中…

延迟显示 #

正delay延迟显示以减少闪烁;关闭立即生效。配置变化取消旧任务并重新计时,卸载清理定时器。无正delay时随Vue更新显示。

加载中…

自定义指示符 #

使用#indicator直接渲染SVG、组件、多节点或原生控件;作用域为{ percent }。内容保持原生属性,样式作用于独立指示器容器;空槽抑制默认值。

加载中…

进度 #

未提供percent时为不定加载;显式数字含0在首帧和SSR呈现有名称的进度环,数值及几何均钳制到0–100。auto每200ms估算,关闭或卸载时清理任务。

加载中…

自定义语义结构的样式和类 #

root、section、indicator、description、container、mask均作用于各自实际容器;tip是既有文案别名。对象和函数式配置读取当前值,局部样式优先于Provider。

加载中…

全屏 #

实际mask为固定全屏覆盖层,正文和原生输入留在文档流中。切换模式保留section与内容身份;styles.mask作用于覆盖层,关闭时隐藏且inert。

加载中…

动态组件Token #

切换当前4个组件Token,观察三档尺寸与嵌套加载层最大高度。正文高度保持,主题移除和恢复不重建输入。内置动画遵守motion=false及系统减少动画偏好。

Powered by Vue 3 + ViteApollo Design · Vue NativeGitHub