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
+18
View File
@@ -50,6 +50,7 @@ import {
inputTag,
grid,
link,
loading,
list,
carousel,
treeSelect,
@@ -1795,6 +1796,23 @@ const content = h(
return h('div', null, pad.el, h('div', { class: 'out' }, () => (sign() ? '已签字(dataURL 长度 ' + sign().length + ')' : '尚未签字')));
})(),
),
section(
'sec-loading',
'区域加载遮罩',
'loading:把要遮挡的块交进 children,active 为真时盖上遮罩;默认延迟 120ms 出场——接口快于这个时间就不闪,慢于它必有反馈。',
(() => {
const busy = signal(false);
const box = loading({
active: busy,
text: '正在刷新订单',
minHeight: 120,
}, card({ title: '订单概览' }, typography({ variant: 'paragraph', type: 'secondary', content: '这里是一块会被整体刷新的内容:遮罩盖住时它仍在原位、只是变淡。' })));
return h('div', { style: 'display:flex;flex-direction:column;gap:8px' },
button({ label: '切换刷新状态', onClick: () => busy(!busy()) }),
box,
);
})(),
),
);
// 悬浮按钮:fixed 定位,挂 body 不参与页面布局