Popconfirm 气泡确认框

轻量级的确认气泡弹窗，点击触发元素后弹出。比 Dialog 更适合简单的确认/取消操作。

预览

Preview

安装

pnpm dlx brutx-vue@latest add popconfirm

用法

<script setup>
import { Popconfirm, Button } from 'brutx-ui-vue'

function handleConfirm() {
    console.log('已确认!')
}

function handleCancel() {
    console.log('已取消!')
}
</script>

<template>
    <Popconfirm
        title="确定要删除此项吗？"
        @confirm="handleConfirm"
        @cancel="handleCancel"
    >
        <Button variant="destructive">删除</Button>
    </Popconfirm>
</template>

自定义按钮文字

<script setup>
import { Popconfirm, Button } from 'brutx-ui-vue'
</script>

<template>
    <Popconfirm
        title="提交此表单？"
        confirm-button-text="是，提交"
        cancel-button-text="不，返回"
        confirm-button-type="primary"
    >
        <Button>提交</Button>
    </Popconfirm>
</template>

危险操作

<script setup>
import { Popconfirm, Button } from 'brutx-ui-vue'
</script>

<template>
    <Popconfirm
        title="此操作不可撤销。"
        confirm-button-type="destructive"
        :cancelable="false"
    >
        <Button variant="destructive">删除账户</Button>
    </Popconfirm>
</template>

API 参考

Popconfirm — 属性

名称	类型	默认值	说明
title 必填	string	—	确认弹层中显示的标题文本。
详情 声明类型 string 默认值详情 未声明默认值 — 来源 Popconfirm.vue:10 packages/ui/src/components/popconfirm/Popconfirm.vue
confirmButtonText	string | undefined	undefined	确认操作按钮的文字；未提供时使用当前语言的默认文案。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 undefined 来源 Popconfirm.vue:12 packages/ui/src/components/popconfirm/Popconfirm.vue
cancelButtonText	string | undefined	undefined	取消操作按钮的文字；未提供时使用当前语言的默认文案。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 undefined 来源 Popconfirm.vue:14 packages/ui/src/components/popconfirm/Popconfirm.vue
confirmButtonType	"primary" | "destructive" | undefined	"primary"	设置确认按钮使用常规主色或危险操作样式。
详情 声明类型 "primary" | "destructive" | undefined 字面量 "destructive" "primary" 默认值详情 声明 'primary' 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 "primary" 来源 Popconfirm.vue:16 packages/ui/src/components/popconfirm/Popconfirm.vue
icon	Component | undefined	undefined	替换默认警告图标的 Vue 图标组件；未提供时显示 TriangleAlert。
详情 声明类型 Component | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 undefined 来源 Popconfirm.vue:18 packages/ui/src/components/popconfirm/Popconfirm.vue
cancelable	boolean | undefined	true	控制是否渲染取消按钮。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 true 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 true 来源 Popconfirm.vue:20 packages/ui/src/components/popconfirm/Popconfirm.vue
class	string | undefined	undefined	追加到弹层内容容器的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 undefined 来源 Popconfirm.vue:21 packages/ui/src/components/popconfirm/Popconfirm.vue
open	boolean | undefined	false	确认弹层的展开状态，支持 v-model:open 双向绑定。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/popconfirm/Popconfirm.vue 解析值 false 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue

Popconfirm — 事件

名称	签名或类型	说明
@update:open	[value: boolean]	弹层展开状态变化时发出新的布尔值。
详情 声明类型 [value: boolean] 字面量 false true 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
@confirm	[]	用户点击确认按钮后关闭弹层并发出确认事件。
详情 声明类型 [] 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
@cancel	[]	用户点击取消按钮后关闭弹层并发出取消事件。
详情 声明类型 [] 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue

Popconfirm — 插槽

名称	签名或类型	说明
#default	{}	提供打开确认弹层的触发元素。
详情 声明类型 {} 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
#icon	{}	替换默认警告图标区域的内容。
详情 声明类型 {} 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue
#description	{}	渲染标题下方的说明内容，并关联为提示框的描述。
详情 声明类型 {} 来源 Popconfirm.vue packages/ui/src/components/popconfirm/Popconfirm.vue

可访问性

• 基于 Popover 构建，遵循 WAI-ARIA 对话框模式
• 键盘操作：Escape 关闭，Tab 在按钮间导航
• 焦点管理：弹窗打开时焦点锁定在内部
• ARIA 属性：按钮有正确的标签