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 of the cancel button; pass an empty string to hide the button; defaults to the locale fallback (see Quick Start - Internationalization)	string	Cancel (locale fallback)	Yes
confirm-text	Text of the confirm button; pass an empty string to hide the button; defaults to the locale fallback (see Quick Start - Internationalization)	string	Confirm (locale fallback)	Yes
loading	Display loading layer during asynchronous operations	boolean	false	Yes
width	Width of the dialog, 50% by default in Element Plus, fixed to 800 by this component	enum stringnumber	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 (done) => void	—	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 stringComponent	—	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	Closes the dialog and fires when the cancel button is clicked	Function () => void	Yes
confirm	Fires when the confirm button is clicked; the dialog does not close automatically, control it via v-model	Function () => void	Yes

Element Plus Native Event Examples:

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

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