iter(g15): toast 悬停暂停自动关闭
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user