Drawer
A veces, Dialog no satisface nuestros requisitos, digamos que tiene un formulario masivo, o necesita espacio para mostrar algo como terminos & condiciones, Drawer tiene una API casi idéntica a Dialog, pero introduce una experiencia de usuario diferente.
TIP
Dado que v-model es nativamente soportado para todos los componentes, visible.sync ha sido desaprobado, use v-model="visibilityBinding" para controlar la visibilidad del drawer 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
Llamada de un drawer temporal, desde varias direcciones
Sin título
Cuando ya no necesite un título, puede eliminarlo del drawer.
Contenido personalizado
Al igual que Dialog, Drawer se puede utilizar para mostrar una multitud de interacciones diversas.
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.
Drawer anidados
También puede tener varias capas de Drawer al igual que con Dialog.
TIP
El contenido dentro del Drawer se renderiza de forma perezosa, lo que significa que el contenido dentro del Drawer no afectará al rendimiento inicial del renderizado, por lo que cualquier operación DOM debe realizarse a través de ref o después de que se emita el evento open.
TIP
Drawer proporciona una API llamada destroyOnClose, que es una variable de bandera que indica que debe destruir el contenido de los hijos dentro de Drawer después de que se ha cerrado. Puede utilizar esta API en el ciclo de vida mounted del componente para que sea llamado cada vez que se abra el Drawer.
API
Attributes
| Nombre | Descripción | Tipo | Default |
|---|---|---|---|
| model-value / v-model | Si se muestra el Drawer | boolean | false |
| append-to-body | Los controles deberían insertar Drawer en el elemento DocumentBody, los Drawer anidados deben asignar este parámetro a true | boolean | false |
| lock-scroll | si el scroll del cuerpo está desactivado mientras se muestra el drawer | boolean | true |
| before-close | Si se establece, se detendrá el procedimiento de cierre | Function | — |
| close-on-click-modal | si el drawer puede ser cerrado haciendo clic en la máscara | boolean | true |
| close-on-press-escape | Indica si el Drawer puede cerrarse pulsando ESC | boolean | true |
| open-delay | Tiempo en (milisegundos) antes de abrir el drawer | number | 0 |
| close-delay | Tiempo en (milisegundos) antes de cerrar el drawer | number | 0 |
| custom-class deprecated | Extra class names for Drawer | string | — |
| destroy-on-close | Indica si los children deben ser destruidos después de cerrar el Drawer | boolean | false |
| modal | Mostrará una capa de sombra | boolean | true |
| direction | Dirección de apertura del Drawer | enum | rtl |
| show-close | Se mostrará el botón de cerrar en la parte superior derecha del Drawer | boolean | true |
| size | Si el Drawer está en modo horizontal, afecta a la propiedad width, de lo contrario afecta a la propiedad height, cuando el tamaño es tipo number, describe el tamaño por unidad de píxeles; cuando el tamaño es tipo string, se debe usar con notación x%, de lo contrario se interpretará como unidad de píxeles | number / string | 30% |
| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot | string | — |
| withHeader | Bandera que controla la existencia de la sección de cabecera, por defecto es verdadera, cuando withHeader tiene false, tanto el atributo tittle como el slot con nombre title dejaran de funcionar | boolean | true |
| modal-class | Nombre extra de clase para capa de sombra | string | — |
| z-index | establece z-index | number | — |
| header-aria-level a11y | header's aria-level attribute | string | 2 |
WARNING
custom-class es deprecated y **será **removido en 2.3.0, por favor utilice class.
Events
| Nombre | Descripción | Type |
|---|---|---|
| open | Se dispara antes de que comience la animación de apertura del Drawer | Function |
| opened | Se dispara cuando finaliza la animación de apertura del Drawer | Function |
| close | Se dispara antes de que comience la animación de cierre del Drawer | Function |
| closed | Se dispara después de que finalice la animación de cierre del Drawer | Function |
| open-auto-focus | triggers after Drawer opens and content focused | Function |
| close-auto-focus | triggers after Drawer closed and content focused | Function |
Slots
| Nombre | Descripción |
|---|---|
| default | El contenido del Drawer |
| header | Contenido de la cabecera del diálogo. Reemplazar esto elimina el título, pero no elimina el botón cerrar. |
| title deprecated | Funciona igual que el slot header. Use el slot header en lugar de este slot. |
| footer | El pie de página de la sección del Drawer |
Exposes
| Nombre | Descripción |
|---|---|
| handleClose | Para cerrar Drawer, este método llamará a before-close. |
JeremyWuuuuu
三咲智子
云游君
btea
wzc520pyfm
qiang
kooriookami
0song
opengraphica
Alan Wang
C.Y.Kun
drylint
Karolis_Stoncius_Sneakybox
bqy_fe
류한경
Delyan Haralanov
Aex
msidolphin
on the field of hope
zazzaz
Hades-li
sea
liu
大河
Xc
LooSheng