跳到正文
Linasan UI

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) })) { … }

属性

属性

类型

本页目录