Notificación

Muestra un mensaje de notificación global en una esquina de la página.

Uso básico

Tipos de notificaciones

Proporcionamos cuatro tipos: success, warning, info y error.

Posición personalizada

La notificación puede surgir de cualquier rincón que uno desee.

Con desplazamiento

Personalice el desplazamiento de notificación desde el borde de la pantalla.

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 esta activada, asegúrese que el contenido de message sea de confianza, y nunca asignar message a contenido generado por el usuario.

Ocultar boton de cerrar

Es posible ocultar el botón de cerrar

Métodos Globales

Element Plus ha añadido un método global $notify para app.config.globalProperties. Así que en una instancia de vue se puede llamar Notification como lo hacemos en esta página.

Importación local

import { ElNotification } from 'element-plus'

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

Herencia de contexto de aplicación > 2.0.4

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

Puede usarlo así:

TIP

Si has registrado globalmente el componente ElNotification automáticamente heredará el contexto de la aplicación.

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

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

API

Opciones

Nombre	Descripción	Tipo	Por defecto
title	título	`string`	''
message	texto explicativo	`string` / `VNode`	''
dangerouslyUseHTMLString	si `message` es tratado como una cadena HTML	`boolean`	false
type	tipo de notificación	`enum`	''
icon	componente de icono personalizado. Será anulado por `type`	`string` / `Component`	—
customClass	nombre de clase personalizado para la notificación	`string`	''
duration	duración antes de cerrar. Si no se quiere que se cierre automáticamente, este valor debe estar a 0	`number`	4500
position	posición personalizada	`enum`	top-right
showClose	si se muestra el botón de cerrar	`boolean`	true
onClose	función que se ejecuta cuando la notificación se cierra	`Function`	—
onClick	función que se ejecuta cuando se hace clic 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
appendTo	establecer el elemento raíz para la notificación, por defecto `document.body`	`string` / `HTMLElement`	—
zIndex	zIndex inicial	`number`	0

Método

Notification y this.$notify devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar a close para ello.