iter(g15): toast 悬停暂停自动关闭

This commit is contained in:
HIsheR
2026-10-26 10:55:11 +08:00
parent 6cd991d6ba
commit 85988f0efc
7 changed files with 24 additions and 8 deletions
+9 -1
View File
@@ -24,6 +24,9 @@ function dismiss(item: HTMLElement): void {
export function showToast(props: ToastProps): HTMLElement {
// —— 状态集中声明 ——
const duration = props.duration ?? 3000; // 停留时长毫秒
let timer = 0; // 自动关闭计时器句柄
let remain = duration; // 悬停暂停时记下的剩余时长
let startedAt = 0; // 本段计时起点,用于折算剩余
const item = h(
'div',
{ class: `ua-toast ua-toast-${props.variant ?? 'info'}${props.closable ? ' is-closable' : ''}`, role: 'status', id: `ua-toast-${++seq}` },
@@ -35,7 +38,12 @@ export function showToast(props: ToastProps): HTMLElement {
stack.appendChild(item);
requestAnimationFrame(() => item.classList.add('ua-open')); // 下一帧入场,保证过渡生效
window.setTimeout(() => dismiss(item), duration);
const arm = (ms: number): void => { startedAt = Date.now(); timer = window.setTimeout(() => dismiss(item), ms); }; // 重新武装倒计时
if (duration > 0) {
arm(duration);
item.addEventListener('pointerenter', () => { window.clearTimeout(timer); remain -= Date.now() - startedAt; }); // 悬停暂停:记下剩余时长
item.addEventListener('pointerleave', () => arm(remain)); // 移出后按剩余时长继续
}
return item;
}