Message Box

Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar información, confirmar operaciones y mostrar mensajes de aviso.

TIP

Por diseño, MessageBox proporciona simulaciones de alert del sistema, confirm y prompt, por lo que su contenido debería ser simple. Para contenido más complejo, por favor utilice el componente Dialog.

Alerta

La alerta interrumpe la operación del usuario hasta que el usuario lo confirme.

Confirmación

Confirm es utilizado para preguntar al usuario y recibir una confirmación.

Preguntar

Prompt es utilizado cuando se requiere entrada de información del usuario.

Use VNode

mensaje puede ser VNode.

Personalización

Se puede personalizar para mostrar varios contenidos.

Usando cadenas HTML

mensaje soporta cadena HTML.

WARNING

Aunque la propiedad message soporta cadenas HTML, renderizando HTML arbitrario en su sitio web puede ser muy peligroso porque puede llevar fácilmente a ataques XSS. Así que cuando peligouslyUseHTMLString esté encendido, por favor asegúrese de que el contenido del menssage es de confianza, y nunca asigne menssage al contenido proporcionado por el usuario.

Distinguir entre cancelar y cerrar

En algunos casos, hacer clic en el botón cancelar y cerrar puede tener diferentes significados.

Contenido centrado

El contenido de MessageBox se puede centrar.

Icono personalizado

El icono se puede personalizar a cualquier componente Vue o función de renderizado (JSX).

Draggable

MessageBox puede ser arrastrable.

Métodos Globales

Si Element Plus se importa completamente, se añadirán los siguientes métodos globales para app.config.globalProperties: $msgbox, $alert, $confirm y $prompt. Así que en una instancia de Vue puede llamar a MessageBox como lo que hicimos en esta página. Los parámetros son:

$msgbox(options)
$alert(message, title, options) or $alert(message, options)
$confirm(message, title, options) or $confirm(message, options)
$prompt(message, title, options) or $prompt(message, options)

Herencia de contexto de aplicación > 2.0.4

Ahora el cuadro de mensaje acepta un context como segundo (cuarto si está usando variantes del cuadro de mensajes) parámetro del constructor de mensajes que le permite inyectar el contexto de la aplicación actual al mensaje que le permite heredar todas las propiedades de la aplicación.

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

// in your setup method
const { appContext } = getCurrentInstance()!
// You can pass it like:
ElMessageBox({}, appContext)
// or if you are using variants
ElMessageBox.alert('Hello world!', 'Title', {}, appContext)

Importación local

Si prefiere importar MessageBox bajo demanda:

import { ElMessageBox } from 'element-plus'

Los métodos correspondientes son: ElMessageBox, ElMessageBox.alert, ElMessageBox.confirm y ElMessageBox.prompt. Los parámetros son los mismos que los anteriores.

API

Options

Name	Descripción	Tipo	Default
autofocus	autofocalización al abrir MessageBox	`boolean`	true
title	título del componente MessageBox	`string`	''
message	contenido del componente MessageBox	`string` / `VNode` / `Function` 2.2.17	—
dangerouslyUseHTMLString	utilizado para que `message` sea tratado como cadena HTML	`boolean`	false
type	tipo de mensaje, utilizado para mostrar el icono	`enum`	''
icon	componente de icono personalizado, sobreescribe `type`	`string` / `Component`	''
custom-class	nombre de la clase personalizada para el componente MessageBox	`string`	''
custom-style	estilo en línea personalizado para MessageBox	`CSSProperties`	{}
callback	Función de callback al cerrar MessageBox si no desea utilizar Promise	`Function`	null
showClose	si desea mostrar el icono cerrar de MessageBox	`boolean`	true
before-close	una función callback antes de que se cierre el MessageBox, y con esto se pueden tomar previsiones al cierre, incluso evitar que el cuadro pueda ser cerrado	`Function`	null
distinguish-cancel-and-close	si distinguir cancelar y cerrar el MessageBox	`boolean`	false
lock-scroll	si bloquear el desplazamiento del cuerpo	`boolean`	true
show-cancel-button	si desea mostrar un botón de cancelar	`boolean`	false (true when called with confirm and prompt)
show-confirm-button	si desea mostrar un botón de confirmar	`boolean`	true
cancel-button-text	contenido de texto del botón cancelar	`string`	Cancel
confirm-button-text	contenido de texto del botón confirmar	`string`	OK
cancel-button-class	nombre de la clase personalizada del botón cancelar	`string`	''
confirm-button-class	nombre de la clase personalizada del botón confirmar	`string`	''
close-on-click-modal	si MessageBox puede cerrarse haciendo clic en la máscara	`boolean`	true (false when called with alert)
close-on-press-escape	si MessageBox puede cerrarse presionando el ESC	`boolean`	true (false when called with alert)
close-on-hash-change	si cerrar MessageBox cuando el hash cambie	`boolean`	true
show-input	si desea mostrar un input	`boolean`	false (true when called with prompt)
input-placeholder	placeholder del input	`string`	''
input-type	tipo de input	`string`	text
input-value	valor inicial del input	`string`	null
input-pattern	regexp para el input	`regexp`	null
input-validator	función de validación del input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, será asignado a inputErrorMessage	`Function`	null
input-error-message	mensaje de error cuando la validación falla	`string`	Illegal input
center	si centrar el contenido	`boolean`	false
draggable	si MessageBox es arrastrable	`boolean`	false
overflow 2.5.4	draggable MessageBox can overflow the viewport	`boolean`	false
round-button	si usar los botones redondos	`boolean`	false
button-size	tamaño personalizado de botones de confirmación y cancelación	`string`	default
append-to 2.2.19	establecer el elemento raíz para el message box	`string` / `HTMLElement`	—

Fuente

Componentes • Documentación

Contribuidores

Message

Notification

Message Box #

Alerta #

Confirmación #

Preguntar #

Use VNode #

Personalización #

Usando cadenas HTML #

Distinguir entre cancelar y cerrar #

Contenido centrado #

Icono personalizado #

Draggable #

Métodos Globales #

Herencia de contexto de aplicación > 2.0.4 #

Importación local #

API #

Options #

Fuente #

Contribuidores #