PopConfirm Component

PopConfirm component is used for scenarios that require secondary confirmation for operations. Clicking an element will pop up a bubble-style confirmation box, commonly used for dangerous operations like deletion and modification that require user secondary confirmation. It's more lightweight and concise compared to modal dialogs.

Basic Usage

Basic pop confirm with confirm and cancel buttons, supporting disabled state.

Pop confirm is commonly used in scenarios that require user secondary confirmation, such as deletion, modification, etc.

Pop confirm will not be triggered when disabled

Show Code

Custom Icon

You can customize the icon type and color of the pop confirm by setting the icon and icon-color attributes to make the operation semantics clearer.

You can customize the icon and color of the pop confirm by setting the icon and icon-color properties to make the operation semantics clearer.

Delete Icon - Red

Success Icon - Green

Information Icon - Blue

Warning Icon - Yellow

Show Code

Custom Buttons

You can customize the text and type of confirm and cancel buttons to better fit business scenario requirements.

You can customize the text and type of confirm and cancel buttons by setting the confirm-text, cancel-text, confirm-type and cancel-type properties.

Default Button Style

Custom Button Text

Custom Button Type

Fully Customized

Show Code

Popup Position

Supports four directions for popup: top, right, bottom, left. You can choose the appropriate popup direction based on page space.

Pop confirm supports four directions of popup, you can choose the appropriate popup direction according to the page space.

Select Direction

Applicable Scenarios for Popup Positions

• top: Suitable for scenarios where the button is located in the bottom area
• right: Suitable for scenarios where the button is located in the left area
• bottom: Suitable for scenarios where the button is located in the top area
• left: Suitable for scenarios where the button is located in the right area

Set the popup position through the position property

Show Code

Custom Style

You can customize the style of the pop confirm by setting attributes like padding, box-shadow, and max-width.

You can customize the style of the pop confirm by setting properties such as padding, box-shadow and max-width.

Padding

Shadow

Max Width

Current Configuration

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

Show Code

Trigger Configuration

Supports multiple interaction configurations such as close by pressing ESC key, close by clicking other areas, etc.

Pop confirm supports multiple trigger configuration options. You can control the closing method of the pop confirm by setting the close-on-press-escape and close-on-press-other properties.

Default Configuration

By default, the pop confirm can only be closed by clicking the confirm or cancel button.

Support ESC to Close

Setting close-on-press-escape to true allows closing the pop confirm by pressing the ESC key.

Click Other Area to Close

Setting close-on-press-other to true allows closing by clicking outside the pop confirm area.

Enable Both Methods

You can set multiple closing methods simultaneously to provide a more flexible interactive experience.

Show Code

Event Handling

PopConfirm provides confirm and cancel events for handling user's confirm and cancel operations.

The pop confirm component provides confirm and cancel events for handling user confirmation and cancellation operations.

Event Description

• confirm event: Triggered when the user clicks the confirm button
• cancel event: Triggered when the user clicks the cancel button

These events can be used to execute corresponding business logic, such as sending requests, updating state, etc.

Show Code

PopConfirm API

TPopConfirm Attributes

Attribute	Description	Type	Accepted Values	Default
modelValue	Whether to show pop confirm (two-way binding)	boolean	—	false
content	Confirm box content	string	—	—
icon	Icon type	string	—	illustrate
icon-color	Icon color	string	—	#999
confirm-text	Confirm button text	string	—	Confirm
cancel-text	Cancel button text	string	—	Cancel
confirm-type	Confirm button type	string	primary/success/warning/danger/info/text	text
cancel-type	Cancel button type	string	primary/success/warning/danger/info/text	text
position	Popup position	string	top/right/bottom/left	top
disabled	Whether disabled	boolean	—	false
padding	Padding	array/number	—	[8, 6, 8, 6]
box-shadow	Shadow settings	array	—	—
max-width	Maximum width	string	—	—
close-on-press-escape	Whether to close by pressing ESC	boolean	—	false
close-on-press-other	Whether to close by clicking other areas	boolean	—	false

Events

Event Name	Description	Callback Parameters
confirm	Triggered when confirm button is clicked	—
cancel	Triggered when cancel button is clicked	—

Slots

Slot Name	Description	Scope Parameters
default	Element that triggers pop confirm display	—
content	Custom pop confirm content	—

Style Variables

Variable Name	Description
$popconfirm-bg-color	PopConfirm background color
$popconfirm-text-color	PopConfirm text color
$popconfirm-border-radius	PopConfirm border radius
$popconfirm-shadow	PopConfirm shadow