## Message Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema. ### Uso basico Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos. :::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas a detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal. ```html ``` ::: ### Tipos Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities. :::demo Cuando necesitas mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, Estableciendo el valor de `type` puedes definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, tenemos registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`. ```html ``` ::: ### Closable Un boton para cerrar que puede ser agregado. :::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`. ```html ``` ::: ### Centered text Utiliza el atributo `center` para centrar el texto. :::demo ```html ``` ::: ### Utiliza cadenas HTML `message` soporta cadenas HTML. :::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML. ```html ``` ::: :::advertencia Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario. ::: ### Metodos Globales Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puedes llamar a `Message` como lo hicimos en esta pagina. ### Importación local Import `Message`: ```javascript import { Message } from 'element-ui'; ``` En este caso deberias llamar al metodo `Message(options)`. Tambien hemos registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. Puedes llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias. ### Options | Atributo | Descripcion | Tipo | Valores permitidos | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | message | texto del mensaje | string / VNode | — | — | | type | tipo del mensaje | string | success/warning/info/error | info | | iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — | | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false | | customClass | nombre de clase personalizado para el componente Message | string | — | — | | duration | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number | — | 3000 | | showClose | utilizado para mostrar un boton para cerrar | boolean | — | false | | center | utilizado para centrar el texto | boolean | — | false | | onClose | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — | ### Metodos `Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puedes llamas al metodo `close`. | Metodo | Descripcion | | ---- | ---- | | close | cierra el componente Message |