element-plus-dialog

name	element-plus-dialog
description	Element Plus Dialog (对话框/弹窗/modal) component (el-dialog) API documentation. Triggers when user wants to use, implement, or asks about el-dialog or Dialog component.

Dialog 组件 API

Attributes

Name	Description	Type	Default
model-value / v-model	visibility of Dialog	^[boolean]	false
title	title of Dialog. Can also be passed with a named slot (see the following table)	^[string]	''
width	width of Dialog, default is 50%	^[string] / ^[number]	''
fullscreen	whether the Dialog takes up full screen	^[boolean]	false
top	value for margin-top of Dialog CSS, default is 15vh	^[string]	''
modal	whether a mask is displayed	^[boolean]	true
modal-penetrable ^(2.10.5)	whether the mask is penetrable. The modal attribute must be false.	^[boolean]	false
modal-class	custom class names for mask	^[string]	—
header-class ^(2.9.3)	custom class names for header wrapper	^[string]	—
body-class ^(2.9.3)	custom class names for body wrapper	^[string]	—
footer-class ^(2.9.3)	custom class names for footer wrapper	^[string]	—
append-to-body	whether to append Dialog itself to body. A nested Dialog should have this attribute set to true	^[boolean]	false
append-to ^(2.4.3)	which element the Dialog appends to. Will override append-to-body	^[CSSSelector] / ^[HTMLElement]	body
lock-scroll	whether scroll of body is disabled while Dialog is displayed	^[boolean]	true
open-delay	the Time(milliseconds) before open	^[number]	0
close-delay	the Time(milliseconds) before close	^[number]	0
close-on-click-modal	whether the Dialog can be closed by clicking the mask	^[boolean]	true
close-on-press-escape	whether the Dialog can be closed by pressing ESC	^[boolean]	true
show-close	whether to show a close button	^[boolean]	true
before-close	callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog	^[Function](done: DoneFn) => void	—
draggable	enable dragging feature for Dialog	^[boolean]	false
overflow ^(2.5.4)	draggable Dialog can overflow the viewport	^[boolean]	false
center	whether to align the header and footer in center	^[boolean]	false
align-center ^(2.2.16)	whether to align the dialog both horizontally and vertically	^[boolean]	false
destroy-on-close	destroy elements in Dialog when closed	^[boolean]	false
close-icon	custom close icon, default is Close	^[string] / ^[Component]	—
z-index	same as z-index in native CSS, z-order of dialog	^[number]	—
header-aria-level ^(a11y)	header's aria-level attribute	^[string]	2
transition ^(2.10.5)	custom transition configuration for dialog animation. Can be a string (transition name) or an object with Vue transition props	^[string] / ^[object]TransitionProps	dialog-fade
custom-class ^(deprecated)	custom class names for Dialog	^[string]	''

Slots

Name	Description
default	default content of Dialog
header	content of the Dialog header; Replacing this removes the title, but does not remove the close button.
footer	content of the Dialog footer
title ^(deprecated)	works the same as the header slot. Use that instead.

Events

Name	Description	Type
open	triggers when the Dialog opens	^[Function]() => void
opened	triggers when the Dialog opening animation ends	^[Function]() => void
close	triggers when the Dialog closes	^[Function]() => void
closed	triggers when the Dialog closing animation ends	^[Function]() => void
open-auto-focus	triggers after Dialog opens and content focused	^[Function]() => void
close-auto-focus	triggers after Dialog closed and content focused	^[Function]() => void

Exposes

Name	Description	Type
resetPosition ^(2.8.1)	reset position	^[Function]() => void
handleClose ^(2.9.8)	close dialog	^[Function]() => void

参考

• 官方文档: https://element-plus.org/en-US/component/dialog.html