## Notification Muestra un mensaje de notificación global en una esquina de la página. ### Uso básico :::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration` se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos. ```html ``` ::: ### Tipos de notificaciones Proporcionamos cuatro tipos: success, warning, info y error. :::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`. ```html ``` ::: ### Posicion personalizada La notificación puede surgir de cualquier rincón que uno desee. :::demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`. ```html ``` ::: ### Desplazamiento Personalizar el desplazamiento de notificación desde el borde de la pantalla. :::demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento. ```html ``` ::: ### Usando cadenas HTML `message` soporta cadenas HTML. :::demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML. ```html ``` ::: :::warning Aunque la propiedad `message` soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está a true, por favor asegúrese de que el contenido del mensaje es confiable, y **nunca** asigne `message` al contenido proporcionado por el usuario. ::: ### Ocultar boton de cerrar Es posible ocultar el botón de cerrar :::demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación. ```html ``` ::: ### Metodo global Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página. ### Importar localmente Importar `Notification`: ```javascript import { Notification } from 'element-ui'; ``` En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al metodo `Notification.closeAll()` para cerrar manualmente todas las instancias. ### Opciones | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- | | title | titulo | string | — | — | | message | mensaje | string/Vue.VNode | — | — | | dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false | | type | tipo de notificacion | string | success/warning/info/error | — | | iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — | | customClass | nombre de clase personalizado para la notificacion | string | — | — | | duration | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number | — | 4500 | | position | posicion personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right | | showClose | si se muestra el boton de cerrar | boolean | — | true | | onClose | funcion que se ejecuta cuando la notificación se cierra | function | — | — | | onClick | funcion que se ejecuta cuando se hace click en la notificación | function | — | — | | offset | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number | — | 0 | ### Metodos `Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello. | Metodo | Descripción | | ------ | ---------------------- | | close | cierra la notificación |