Dialog
Informa a usuarios preservando el estado de la página actual.
TIP
Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).
Uso básico
Dialog abre una caja de diálogo, y es bastante personalizable.
TIP
before-close solo funciona cuando el usuario hace clic en el icono de cerrar o en el backdrop. Si tiene botones que cierran el diálogo en el slot con nombre footer, puede añadir lo que se debería hacer con before-close en el manejador de eventos de clic de los botones.
Contenido personalizado
El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Plus Table y Form con Dialog.
Cabecera personalizada
El slot header se puede utilizar para personalizar el área donde se muestra el título. Para mantener la accesibilidad, utilice el atributo title cuando use el slot, o utilice la propiedad titleId para especificar qué elemento debe ser leído como el título del diálogo.
Diálogo anidado
Si un Diálogo está anidado en otro Diálogo, se requiere append-to-body.
Contenido centrado
El contenido del diálogo se puede centrar.
TIP
El contenido del Diálogo se muestra perezosamente, lo que significa que el slot por defecto se renderiza en el DOM después de que se abra. Por lo tanto, si necesita realizar una manipulación DOM o acceder a un componente usando ref, hágalo en el callback del evento open.
Alinear el diálogo al centro
Abrir diálogo desde el centro de la pantalla.
Destruir al cerrar
Cuando esta característica está activada, el contenido en el slot predeterminado se destruirá con una directiva v-if. Habilite esto cuando tenga problemas de rendimiento.
Diálogo arrastrable
Intento de arrastre para la parte del header.
TIP
Cuando se usa modal = false, por favor asegúrese de que append-to-body se estableció a true, porque Dialog es posicionado por position: relative, cuando modal es removido, Dialog se colocará basándose en la posición actual en el DOM, en lugar de Document.Body, por lo que el estilo será desordenado.
API
Attributes
| Nombre | Descripción | Tipo | Default |
|---|---|---|---|
| model-value / v-model | visibilidad del diálogo | boolean | — |
| title | título del diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string | '' |
| width | width of Dialog, default is 50% | string / number | '' |
| fullscreen | si el diálogo ocupa la pantalla completa | boolean | false |
| top | value for margin-top of Dialog CSS, default is 15vh | string | '' |
| modal | si se muestra una máscara | boolean | true |
| modal-class | custom class names for mask | 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 | string | body |
| lock-scroll | whether scroll of body is disabled while Dialog is displayed | boolean | true |
| custom-class deprecated | custom class names for Dialog | string | '' |
| 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 | — |
| 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 |
WARNING
custom-class has been deprecated, and will be removed in 2.4.0, please use class.
Slots
| Nombre | Descripción |
|---|---|
| — | contenido del diálogo |
| header | contenido de la cabecera del diálogo. Reemplazar esto elimina el título, pero no elimina el botón cerrar. |
| title deprecated | works the same as the header slot. Use el slot header en lugar de este slot. |
| footer | contenido del pie de página del diálogo |
WARNING
title has been deprecated, and will be removed in 2.4.0, please use header.
Events
| Nombre | Descripción | Type |
|---|---|---|
| open | se dispara cuando se abre el Dialog | Function |
| opened | se dispara cuando la animación de apertura del Dialog termina | Function |
| close | se dispara cuando el Diálogo se cierra | Function |
| closed | se dispara cuando finaliza la animación de cierre del Diálog | Function |
| open-auto-focus | se dispara después que el Dialog se abre y el contenido obtiene el foco | Function |
| close-auto-focus | se dispara después que el Dialog se cierra y el contenido obtiene el foco | Function |
FAQ
Usando el diálogo en SFC, el estilo de ámbito no tiene efecto.
Typical issue: #10515
PS: Since the dialog is rendered using Teleport, the style of the root node is recommended to be written globally.
Cuando se muestra y oculta el diálogo, hay una situación en la que los elementos de la página son desplazados de ida y vuelta.
Typical issue: #10481
PS: It is recommended to place the scroll area inside a vue mounted node, e.g. <div id="app" />, and use the overflow: hidden style for the body.
三咲智子
Jeremy
云游君
Xc
btea
bqy_fe
Delyan Haralanov
Aex
kooriookami
zz
류한경
Karolis_Stoncius_Sneakybox
LIUCHAO
opengraphica
C.Y.Kun
Jungzl
Chen
Fl
wzc520pyfm
Giwayume
jarven
hfutsora
FunkyZc
Hefty
spx
Alan Wang
msidolphin
on the field of hope
zazzaz
Hades-li
Cully Fung
betavs
Kaine
vaebe
LooSheng
qiang