Message

Utilizado para mostrar comentarios después de una actividad. La diferencia con el componente Notification es que este último es utilizado para mostrar una notificación pasiva.

Uso básico

Se muestra en la parte superior de la pagina y desaparece después de 3 segundos.

Tipos

Utilizado para mostrar los comentarios de Éxito, Advertencia, Mensaje y Error de las actividades.

Plain 2.6.3

Set plain to have a plain background.

Cerrable

Un botón para cerrar que puede ser agregado.

Texto centrado

Para centrar el texto utilice el atributo center.

Usando cadenas HTML

message soporta cadenas HTML.

WARNING

Aunque la propiedad message soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso, ya que puede conducir fácilmente a ataques XSS. Entonces, cuando dangerouslyUseHTMLString está activada, asegúrese que el contenido de message sea de confianza, y nunca asigne a message contenido generado por el usuario.

Agrupando

fusiona mensajes con el mismo contenido.

Métodos Globales

Element Plus ha agregado un método global llamado $message para app.config.globalProperties. Así en una instancia de vue puede llamar a Mensaje como lo que hicimos en esta página.

Importación local

import { ElMessage } from 'element-plus'

En este caso debería llamar al método ElMessage(options). También se han registrado métodos para los diferentes tipos, e.g. ElMessage.success(options). Puede llamar al método ElMessage.closeAll() para cerrar manualmente todas las instancias.

App context inheritance 2.0.3

Ahora Message acepta un context como segundo parámetro del constructor de mensajes que le permite inyectar el contexto de la aplicación actual al mensaje, lo que le permite heredar todas las propiedades de la aplicación.

Puede usarlo así:

TIP

Si ha registrado globalmente el componente ElMessage, automáticamente heredará el contexto de la aplicación.

import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

// in your setup method
const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)

API

Opciones

Nombre	Descripción	Tipo	Por defecto
message	texto del mensaje	`string` / `VNode` / `Function`	''
type	tipo de mensaje	`enum`	info
plain 2.6.3	whether message is plain	`boolean`	false
icon	componente de icono personalizado, sobreescribe `type`	`string` / `Component`	—
dangerouslyUseHTMLString	utilizado para que `message` sea tratado como cadena HTML	`boolean`	false
customClass	nombre de clase personalizado para el componente Message	`string`	''
duration	duración del tiempo en que será mostrado, en milisegundos. Si se establece a 0, no se desactivará automáticamente	`number`	3000
showClose	si se muestra el botón de cerrar	`boolean`	false
center	utilizado para centrar el texto	`boolean`	false
onClose	función callback ejecutada cuando se cierra con una instancia de message como parámetro	`Function`	—
offset	ajustar la distancia a la parte superior de la vista	`number`	16
appendTo	establecer el elemento raíz del mensaje, por defecto `document.body`	`string` / `HTMLElement`	—
grouping	combinar mensajes con el mismo contenido, el tipo de mensaje VNode no está soportado	`boolean`	false
repeatNum	The number of repetitions, similar to badge, is used as the initial number when used with `grouping`	`number`	1