气泡确认框组件

气泡确认框组件用于操作需要二次确认的场景，点击元素会弹出气泡式的确认框，常用于删除、修改等需要用户进行二次确认的危险操作，相比模态对话框更为轻量和简洁。

基础用法

基础的气泡确认框，包含确认、取消按钮，并支持禁用状态。

气泡确认框常用于需要用户二次确认的操作场景，如删除、修改等。

禁用状态下不会触发气泡确认框

显示代码

自定义图标

可以通过设置icon和icon-color属性来自定义气泡确认框的图标类型和颜色，使操作语义更加明确。

通过设置 icon 和 icon-color 属性可以自定义气泡确认框的图标和颜色，使操作的语义更明确。

删除图标 - 红色

成功图标 - 绿色

信息图标 - 蓝色

警告图标 - 黄色

显示代码

自定义按钮

可以自定义确认和取消按钮的文本和类型，使其更符合业务场景需求。

通过设置 confirm-text、cancel-text、confirm-type 和 cancel-type 属性可以自定义确认和取消按钮的文本和类型。

默认按钮样式

自定义按钮文本

自定义按钮类型

完全自定义

显示代码

弹出位置

支持四个方向弹出：上、右、下、左，可以根据页面空间选择合适的弹出方向。

气泡确认框支持四个方向弹出，可以根据页面空间选择合适的弹出方向。

选择方向

弹出位置的适用场景

• top（上）：适用于按钮位于底部区域的场景
• right（右）：适用于按钮位于左侧区域的场景
• bottom（下）：适用于按钮位于顶部区域的场景
• left（左）：适用于按钮位于右侧区域的场景

通过 position 属性设置弹出位置

显示代码

自定义样式

可以通过设置padding、box-shadow和max-width等属性自定义气泡确认框的样式。

通过设置 padding、box-shadow 和 max-width 等属性可以自定义气泡确认框的样式。

内边距

阴影

最大宽度

当前配置

padding: [8,8,8,8]
box-shadow: [0,4,12,"rgba(0, 0, 0, 0.1)"]
max-width: 300px

显示代码

触发配置

支持多种交互方式配置，如按ESC键关闭、点击其他区域关闭等。

气泡确认框支持多种触发配置选项，可以通过设置 close-on-press-escape 和 close-on-press-other 属性来控制气泡确认框的关闭方式。

默认配置

默认情况下，气泡确认框只能通过点击确认或取消按钮关闭。

支持ESC关闭

设置 close-on-press-escape 为 true 可以通过按ESC键关闭气泡确认框。

点击其他区域关闭

设置 close-on-press-other 为 true 可以通过点击气泡确认框外部区域关闭。

同时启用两种方式

可以同时设置多种关闭方式，提供更灵活的交互体验。

显示代码

事件处理

气泡确认框提供了confirm和cancel事件，用于处理用户的确认和取消操作。

气泡确认框组件提供了 confirm 和 cancel 事件，用于处理用户的确认和取消操作。

事件说明

• confirm 事件：当用户点击确认按钮时触发
• cancel 事件：当用户点击取消按钮时触发

这些事件可以用于执行相应的业务逻辑，如发送请求、更新状态等。

显示代码

气泡确认框 API

TPopConfirm 属性

属性名	说明	类型	可选值	默认值
modelValue	是否显示气泡确认框(双向绑定)	boolean	—	false
content	确认框内容	string	—	—
icon	图标类型	string	—	illustrate
icon-color	图标颜色	string	—	#999
confirm-text	确认按钮文本	string	—	确定
cancel-text	取消按钮文本	string	—	取消
confirm-type	确认按钮类型	string	primary/success/warning/danger/info/text	text
cancel-type	取消按钮类型	string	primary/success/warning/danger/info/text	text
position	弹出位置	string	top/right/bottom/left	top
disabled	是否禁用	boolean	—	false
padding	内边距	array/number	—	[8, 6, 8, 6]
box-shadow	阴影设置	array	—	—
max-width	最大宽度	string	—	—
close-on-press-escape	按ESC是否关闭	boolean	—	false
close-on-press-other	点击其他区域是否关闭	boolean	—	false

事件

事件名	说明	回调参数
confirm	点击确认按钮时触发	—
cancel	点击取消按钮时触发	—

插槽

插槽名	说明	作用域参数
default	触发气泡确认框显示的元素	—
content	自定义气泡确认框内容	—

样式变量

变量名	说明
$popconfirm-bg-color	气泡确认框背景色
$popconfirm-text-color	气泡确认框文字颜色
$popconfirm-border-radius	气泡确认框圆角
$popconfirm-shadow	气泡确认框阴影