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

Displays at the top by default, and disappears after 3 seconds. You can control the position using the placement property.

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.

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.

Placement 2.11.0

Control the position where messages appear. Messages can be displayed at the top (default) or other placements of the viewport.

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
onClose	función callback ejecutada cuando se cierra con una instancia de message como parámetro	`Function`	—
offset	set the distance to the viewport edge (top when placement is 'top', bottom when placement is 'bottom')	`number`	16
placement 2.11.0	message placement position	`enum`	top
appendTo	establecer el elemento raíz del mensaje, por defecto `document.body`	`CSSSelector` / `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