🌏 Translated with the assistance of DeepSeek and ChatGPT

Popconfirm

A popup with a confirm button.

Popconfirm is similar to Popover in interaction, but focuses on confirmation (confirm/cancel) scenarios for quick confirmation flows.

Basic Usage

Use the content prop to set the message. By default Popconfirm shows an icon, message and footer buttons (confirm/cancel).

Hide source code

Hide source code

Controlled Mode

Passing visible switches the component to controlled mode. If omitted or set to undefined, the component is uncontrolled and defaultVisible can be used to set the initial state. The component emits update:visible to support v-model.

Hide source code

Asynchronous Confirmation

When onBeforeOk is provided, the confirmation process will wait for onBeforeOk to complete. If the result is not false, subsequent code will be executed.

Hide source code

Custom Footer and Icon

Customize the entire bottom area via the footer slot. Use the icon slot for custom icons; showIcon controls icon visibility. To modify button text or properties only, use okText, cancelText, okButtonProps, and cancelButtonProps.

Hide source code

Disabled State

Set disabled to disable the component. Trigger actions will be ignored and the popup will not open.

Hide source code

API

PopconfirmProps

Attribute	Type	Optional	Default	Description	Version
content	string	True		Text content of the confirmation popup.	0.1.0
visible	boolean | null	True		Whether to display (controlled mode, supports v-model).	0.1.0
defaultVisible	boolean | null	True		Default visibility state in uncontrolled mode.	0.1.0
loading	boolean	True	false	Pass loading to control the loading state of the confirm button.	0.1.0
placement	'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'	True	'top'	Popup placement.	0.1.0
okText	string	True		Text for the confirm button.	0.1.0
cancelText	string	True		Text for the cancel button.	0.1.0
showIcon	boolean	True	true	Whether to show the default icon.	0.1.0
showCancel	boolean	True	true	Whether to show the cancel button.	0.1.0
showFooter	boolean	True	true	Whether to show the footer area.	0.1.0
offset	number	True	8	Popup offset distance (pixels).	0.1.0
variant	'dark' | 'light'	True	'light'	Component style variant (light/dark).	0.1.0
arrow	boolean	True	true	Whether to show arrow.	0.1.0
disabled	boolean	True	false	Whether disabled.	0.1.0
zIndex	number	True		z-index of the popup layer.	0.1.0
animationDuration	number	True	250	Duration of the popup show/hide animation.	0.1.5
root	HTMLElement | string	True	'body'	Mount element.	0.1.0
destroyOnHide	boolean	True	false	Whether to destroy content when hidden.	0.1.0
popoverProps	Omit<PopoverProps, 'visible' | 'content' | 'defaultVisible'> & EmitEvent<PopoverEvents>	True		Props passed through to the internal Popover.	0.1.0
okButtonProps	ButtonProps & EmitEvent<ButtonEvents> & RestAttrs	True		Props and events passed to the confirm button.	0.1.0
cancelButtonProps	ButtonProps & EmitEvent<ButtonEvents> & RestAttrs	True		Props and events passed to the cancel button.	0.1.0
containerProps	RestAttrs	True		DOM attributes passed to the container area.	0.1.0
contentProps	RestAttrs	True		DOM attributes passed to the content area container.	0.1.0
footerProps	RestAttrs	True		DOM attributes passed to the footer area container.	0.1.0

PopconfirmEvents

Event	Parameter	Description	Version
update:visible	value: boolean	Triggered when v-model updates.	0.1.0
beforeOk		For async confirmation. Must return a value of type Promise<boolean | void> | boolean | void. Confirmation succeeds if the result after await is not false.	0.1.0
ok	event: MouseEvent	Triggered when the confirm button is clicked (after beforeOk passes).	0.1.0
cancel	event: MouseEvent | KeyboardEvent	Triggered when the cancel button is clicked.	0.1.0
close	e: MouseEvent	Triggered when the popup closes.	0.1.0
open	e: MouseEvent	Triggered when the popup opens.	0.1.0

PopconfirmSlots

Slot	Parameter	Description	Version
default		Slot for the trigger element.	0.1.0
content		Custom content slot.	0.1.0
icon		Custom icon slot.	0.1.0
footer		Custom footer slot.	0.1.0

PopconfirmExpose

Attribute	Type	Optional	Default	Description	Version
open	() => void	False		Opens the confirmation popup.	0.1.0
close	() => void	False		Closes the confirmation popup.	0.1.0

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}