iter(g273): 新增区域加载遮罩组件

This commit is contained in:
HIsheR
2026-10-26 22:59:06 +08:00
parent 1cb9d7a25a
commit d6e4319151
12 changed files with 226 additions and 10 deletions
+28 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T14:56:09.624Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T14:58:51.630Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -2315,6 +2315,32 @@ const pad = signaturePad({ value: sign, height: 140 }); mount('#box', () => pad.
现场演示:apps/docs/demo.html#sec-sign
### loading — 区域加载遮罩 Loading
参数:
- active:boolean | Signal<boolean> —— 是否加载中:布尔直接置位,传信号则随状态显隐
- text:string —— 遮罩文案;缺省只显示转圈(读屏仍报「内容加载中」)
- delay:number —— 出场延迟(ms);缺省 120,快请求不闪遮罩
- spinnerSize:number —— 转圈直径(px);缺省 20
- minHeight:number —— 最小高度(px);内容为空时兜住遮罩高度
示例:
```
loading({ active: busy, text: '正在刷新订单' }, dataTable({ ... }))
```
手把手:
1. 把要遮挡的那块内容作为 children 交进来,active 传布尔或信号:刷新时盖上遮罩,数据回来后自动收起
2. 内容不隐藏、只降透明度——布局与尺寸原地保留,遮罩收起时不会跳一下
3. 默认延迟 120ms 出场:接口快于这个时间就不闪遮罩;想立刻显示传 delay: 0
4. 遮罩文案写明在等什么(「正在刷新订单」),读屏同一句也会播报;只要转圈就省略 text
5. 内容可能为空时给 minHeight,否则高度塌成 0 遮罩无处可盖
现场演示:apps/docs/demo.html#sec-loading
API 速览:
- button(props):按钮,variant 三档视觉强度,disabled / loading 支持布尔或信号动态同步(loading 转圈并禁点),onClick 点击回调
@@ -2400,6 +2426,7 @@ API 速览:
- diffView(props):文本差异对比,行级 LCS 对齐 + 增删着色 + 双行号列,顶部带 +N / −N 统计
- codeBlock(props):代码块,等宽多行 + 行号列 + 标题行 + 一键复制原文,只展示不高亮
- signaturePad(props):手写签名板,指针绘制 + DPR 位图,返回 handle(el / clear / toDataURL / isEmpty)
- loading(props, ...children):区域加载遮罩,内容原地降透明度 + 转圈文案,带延迟出场避免快请求闪烁
一行用法: