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
Event Name | Description | Type | Expandable |
---|---|---|---|
cancel | Callback for the cancel button | Function | Yes |
confirm | Callback for the confirm button | Function | Yes |
open | Callback when the Dialog opens | Function | No |
opened | Callback when the Dialog open animation ends | Function | No |
close | Callback when the Dialog closes | Function | No |
closed | Callback when the Dialog close animation ends | Function | No |
open-auto-focus | Callback when focus is in the Dialog content | Function | No |
close-auto-focus | Callback when focus moves out of the Dialog content | Function | No |