iter(g292): toast 溢出改走退场

This commit is contained in:
HIsheR
2026-10-26 23:21:30 +08:00
parent e0de7dfe7b
commit 346d514284
4 changed files with 9 additions and 5 deletions
+2 -1
View File
@@ -37,7 +37,8 @@ export function showToast(props: ToastProps): HTMLElement {
props.closable ? h('button', { type: 'button', class: 'ua-toast-close', 'aria-label': '关闭提示', onClick: () => dismiss(item) }, '×') : null,
);
const stack = ensureHost();
if (stack.childElementCount >= MAX_STACK) stack.firstElementChild?.remove(); // 超过上限直接挤掉最早一条
const oldest = stack.childElementCount >= MAX_STACK ? stack.firstElementChild : null;
if (oldest) dismiss(oldest as HTMLElement); // 超出上限让最早一条走正常退场:直接 remove 会让它凭空消失,与手动关闭两种手感
stack.appendChild(item);
requestAnimationFrame(() => item.classList.add('ua-open')); // 下一帧入场,保证过渡生效
+2 -1
View File
@@ -1156,7 +1156,8 @@
"多条消息在右上角自动纵向堆叠,互不遮挡",
"需要完整入参(含 variant)时用 showToast(props);组件挂载容器由内部懒创建,样式随 ui.css 一起引入",
"同屏最多 4 条,超出自动挤掉最早一条;需要用户主动确认的消息用 showToast({ closable: true }) 给个 ×",
"要「撤销」这类操作时给 showToast 传 actionLabel 与 onAction:按钮出现在文案右侧,点完先收起再回调,duration 建议放到 5000 让用户来得及点"
"要「撤销」这类操作时给 showToast 传 actionLabel 与 onAction:按钮出现在文案右侧,点完先收起再回调,duration 建议放到 5000 让用户来得及点",
"同屏最多 4 条:第 5 条进来时最早一条走正常退场(淡出后移除)而不是瞬间消失;要不被挤掉就传 duration: 0 让它常驻,靠 closable 手动关"
]
},
{