Confirm 确认框
缩放同源转场:从触发控件中心弹性「长」出,确认/取消后缩回控件。互斥单例 · 异步确认 loading · 三态返回值 · 焦点陷阱 · Esc。
触发控件(从控件中心长出 / 缩回)
遮罩点击行为(backdrop)
互斥替换(同时仅一个确认框,新调用替换旧框)
操作日志
点击触发控件,观察 morph 转场与返回值
import { confirm } from "@qingwu-ui/confirm";
import "@qingwu-ui/confirm/style.css";
// 从触发控件中心 morph 长出,确认/取消后缩回
const result = await confirm(deleteBtn, {
title: "删除文件?",
message: "该操作**不可撤销**。",
danger: true, // 确认按钮红色
confirmText: "删除",
onConfirm: async () => {
await deleteFile(); // 异步:loading 态 → 成功才缩回
},
});
if (result === "confirm") toast.success("已删除");
// result: "confirm" | "cancel" | "dismiss"(Esc / 遮罩 / dismiss())
// 遮罩点击行为 / 互斥
confirm(btn, { backdrop: "ignore" }); // 点遮罩不关闭
confirm.dismiss(); // 程序化关闭
confirm.configure({ confirmText: "是" }); // 全局默认