ConfirmDialog 确认弹窗
危险或重要操作前的二次确认:对象卡片、影响列表、勾选确认、输入名称确认。
按后果选强度,不按动作名选:
- 可恢复、影响小:用 Popconfirm。
- 不可恢复:
ConfirmDialog,tone: 'danger',写清后果(description)和删的是谁(target)。 - 连带影响其他数据:加
bullets列出影响,或acknowledge要求勾选。 - 影响很大:
typeToConfirm要求输入名称。
onConfirm 返回 Promise 时按钮转圈、不可关闭,完成后关闭;confirm() 返回是否确认。ConfirmDialog 也可以受控使用。
安装
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/confirm-dialog.json第一次装本站的组件前先在项目里执行一次 shadcn init,详见 安装。
用法
import { ConfirmProvider, useConfirm } from '@/components/feedback/confirm-dialog';
// 根部
<ConfirmProvider>{app}</ConfirmProvider>
// 组件里
const confirm = useConfirm();
if (await confirm({ title: '删除用户「张三」?', onConfirm: () => api.remove(id) })) { … }属性
属性
类型