Dialog

A secondary encapsulation of the element-plus dialog component.

Basic Usage

Asynchronous Loading Indicator

Properties

Property	Description	Type	Default	Expandable
model-value / v-model	Whether to display the Dialog	boolean	false	No
cancel-text	Text for the cancel button, hidden if empty	string	Cancel	Yes
confirm-text	Text for the confirm button, hidden if empty	string	Confirm	Yes
loading	Display loading layer during asynchronous operations	boolean	false	Yes
width	Width of the dialog, default is 50%	enum	800	Yes
destroy-on-close	Destroy elements inside the Dialog when closed	boolean	true	Yes
close-on-click-modal	Whether the Dialog can be closed by clicking the modal background	boolean	false	Yes
close-on-press-escape	Whether the Dialog can be closed by pressing ESC	boolean	false	Yes
title	Title of the Dialog, can also be passed in through a named slot	string	''	No
fullscreen	Whether the Dialog should be fullscreen	boolean	false	No
top	The margin-top value in dialog CSS, default is 15vh	string	''	No
modal	Whether a modal overlay is needed	boolean	true	No
modal-class	Custom class for the modal overlay	string	—	No
append-to-body	Whether the Dialog itself should be appended to the body element. Nested Dialogs must specify this property and set it to true	boolean	false	No
append-to	Which DOM element the Dialog is mounted to, overrides append-to-body (Version: 2.4.3)	string	body	No
lock-scroll	Whether to lock body scroll when the Dialog is displayed	boolean	true	No
open-delay	Delay in opening the Dialog, in milliseconds	number	0	No
close-delay	Delay in closing the Dialog, in milliseconds	number	0	No
show-close	Whether to display the close button	boolean	true	No
before-close	Callback before closing, will pause Dialog closure. The dialog is truly closed when the done method within the callback is called.	Function	—	No
draggable	Enable drag functionality for the Dialog	boolean	false	No
overflow	Dragging range can exceed the visible area	boolean	false	No
center	Whether to center the Dialog's header and footer parts	boolean	false	No
align-center	Whether to horizontally and vertically align the Dialog	boolean	false	No
close-icon	Custom close icon, default is Close	enum	—	No
z-index	z-index of the Dialog, same as native CSS z-index, changes the z-axis order	number	—	No
header-aria-level	ARIA level for the header	string	2	No

Slots

Slot Name	Description	Type
—	Content of the Dialog	-
header	Content of the dialog header; replaces the header part but does not remove the close button.	-
footer	Content of the Dialog button operation area	-

Events

This component supports all native events of Element Plus Dialog. All events are automatically forwarded to the underlying el-dialog component.

Extended Events:

Event Name	Description	Type	Expandable
cancel	Callback for the cancel button	Function	Yes
confirm	Callback for the confirm button	Function	Yes

Element Plus Native Event Examples:

Event Name	Description	Type
open	Callback when the Dialog opens	Function
opened	Callback when the Dialog open animation ends	Function
close	Callback when the Dialog closes	Function
closed	Callback when the Dialog close animation ends	Function
open-auto-focus	Callback when focus is in the Dialog content	Function
close-auto-focus	Callback when focus moves out of the Dialog content	Function

💡 Multi-version Compatibility: Supports all Element Plus 2.x versions, including future events that will be automatically available.