iter(g99): 加载指示器补可定制播报

This commit is contained in:
HIsheR
2026-10-26 13:17:12 +08:00
parent 44efe8b547
commit a5d4fafab1
7 changed files with 30 additions and 7 deletions
+1 -1
View File
@@ -4,7 +4,7 @@ import type { SpinnerProps } from './types.js';
/*** 加载指示器:纯 CSS 旋转动画,size 控制直径 ***/
export function spinner(props: SpinnerProps = {}): HTMLElement {
const size = `${props.size ?? 18}px`;
const el = h('span', { class: 'ua-spinner', role: 'status', 'aria-label': '加载中' }); // 读屏播报加载状态
const el = h('span', { class: 'ua-spinner', role: 'status', 'aria-label': props.label ?? '加载中' }); // 读屏播报加载状态,label 可写明在加载什么
el.style.width = size;
el.style.height = size;
return el;
+2 -1
View File
@@ -312,7 +312,8 @@ export interface ToastProps {
/*** 加载指示器入参 ***/
export interface SpinnerProps {
size?: number; // 直径像素;缺省 18
size?: number; // 直径像素;缺省 18
label?: string; // 读屏播报文案,如「正在加载订单」;缺省「加载中」
}
/*** 进度条入参 ***/
+7 -1
View File
@@ -1119,13 +1119,19 @@
"t": "number",
"d": "直径像素;缺省 18",
"df": "18"
},
{
"n": "label",
"t": "string",
"d": "读屏播报文案,如「正在加载订单」;缺省「加载中」"
}
],
"example": "spinner(); spinner({ size: 26 })",
"steps": [
"数据加载时插入 spinner(),加载完成移除",
"用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)",
"与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner"
"与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner",
"区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」"
]
},
{