Delete 删除确认

删除确认组件用于需要二次确认的危险操作，支持按钮、图标、菜单三种触发方式，可设置文字匹配二次校验。

Button 模式

默认以红色边框按钮展示，点击后弹出确认弹窗。

<TDelete label="删除项目" @delete="onDelete" />

Icon 模式

设置 display-type="icon" 使用图标按钮，适合紧凑布局。

<TDelete display-type="icon" @delete="onDelete" />

Menu 模式

设置 display-type="menu" 使用菜单项样式，适合下拉菜单中的删除操作。

<TDelete display-type="menu" label="删除用户" @delete="onDelete" />

Popover 轻量确认

设置 display-type="popover" 使用气泡卡片快速确认，适合轻量删除场景，无需弹窗打断操作流。

<TDelete label="删除评论" display-type="popover" @delete="onDelete" />

禁用状态

设置 disabled 禁用删除按钮。

<TDelete label="不可删除" disabled />
<TDelete display-type="icon" disabled />

二次确认（Match）

设置 match 属性，用户必须输入指定文字才能确认删除，有效防止误操作。

<TDelete label="删除重要数据" match="DELETE" @delete="onDelete" />

加载状态

通过 loading 属性控制确认按钮的加载状态，适合异步删除场景。

<TDelete label="异步删除" :loading="true" @delete="onDelete" />

多语言支持（Locale）

通过 locale 属性传入文案对象，可自定义弹窗和气泡中的所有文字。未传入的字段回退为简体中文。

<TDelete
  label="Delete Item"
  :locale="{
    confirmTitle: 'Confirm Deletion',
    confirmMessage: 'Are you sure?',
    confirmLabel: 'Confirm',
    cancelLabel: 'Cancel',
  }"
  @delete="onDelete"
/>

API

Props

Prop	说明	类型	默认值
label	按钮/菜单文字	string	'删除'
size	图标尺寸（仅 icon 模式有效）	number	24
disabled	禁用	boolean	false
displayType	显示样式	'button' | 'icon' | 'menu' | 'popover'	'button'
match	二次确认文字	string	undefined
loading	加载中状态	boolean	false
locale	多语言文案对象	DeleteLocale	{}

DeleteLocale

字段	说明	默认值
confirmTitle	弹窗标题	'确认删除'
confirmMessage	弹窗确认提示	'确定要执行此操作吗？'
irreversible	不可撤销提示	'此操作不可撤销。'
popoverConfirm	气泡确认文字前缀	'确认'
confirmLabel	确认按钮文字	'确认'
cancelLabel	取消按钮文字	'取消'
typeToConfirm	二次确认提示（支持 HTML）	'请输入 <span class="fw-bold text-danger">{match}</span> 以确认'

Events

事件	说明	参数
delete	用户确认删除时触发	—