青梧 UI

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: "是" }); // 全局默认

缩放同源转场

transform-origin 固定 50% 50%,以触发控件中心为起点:translate(tx,ty) scale(0.02) → none,过冲 cubic-bezier 弹性回弹;关闭时反向缩回,无过冲。测量失败或触发元素不存在时自动降级为纯居中淡入。

点击上方任意触发按钮,观察对话框从按钮中心「长」出 / 「缩」回

键盘与无障碍

role=dialog + aria-modal + 焦点陷阱 + Esc + 焦点回归触发控件,reduced-motion 下退化为淡入淡出。

  • Enter确认按钮
  • Tab / Shift+Tab在按钮间循环(焦点陷阱)
  • Esc逃逸关闭(loading 期间忽略)
  • 焦点回归关闭后自动回到触发控件