MessageBox

Displays message dialogs through the YhMessageBox function API, including alert, confirm, and prompt modes.

Basic Usage

Provides three common interaction modes: alert, confirm, and prompt.

Alert

Confirm Dialog

Prompt

Different States

Use iconType to display success, warning, info, or error feedback.

Success State

Warning State

Error State

Info State

Custom Content

The message option supports plain text, VNodes, and HTML strings.

VNode Rendering

Using HTML Snippet

Warning

While dangerouslyUseHTMLString is convenient, it can lead to XSS attacks. Only pass trusted content.

Vision and Layout

Use layout-related options such as glass, center, and draggable to adjust appearance and interaction behavior.

Center Layout

Draggable

Asynchronous Close Interception

Use beforeClose to intercept confirm, cancel, or close actions before the dialog is dismissed.

Async Interception

Loading State

Use confirmButtonLoading, cancelButtonLoading, or update the exposed instance state inside beforeClose to control button loading behavior.

Async Loading Demo

Global Default Configuration

Use setDefaults to update the global default options used by subsequent YhMessageBox calls.

Global Configuration Demo

Use in Nuxt

YhMessageBox can be called in Nuxt client-side interaction flows after the YH-UI module is registered. Because the function API rejects on the server, it should be triggered from browser-side logic such as click handlers or client-only lifecycle code.

Nuxt Usage Demo

Notes:

• Register @yh-ui/nuxt to use the library in Nuxt with auto-import support.
• The runtime rejects calls on the server, so open dialogs from browser-side code.
• Component styles are injected through the normal YH-UI style pipeline after hydration.

Global Methods

When the full library is installed, the following methods are also attached to app.config.globalProperties:

• $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)

Application Context Inheritance

YhMessageBox accepts an app context so dialogs can inherit the current Vue application configuration.

import { getCurrentInstance } from 'vue'
import { YhMessageBox } from '@yh-ui/yh-ui'

const { appContext } = getCurrentInstance()!

YhMessageBox({}, appContext)
YhMessageBox.alert('Hello world!', 'Title', {}, appContext)

API

Methods

Method	Description	Parameter Type	Return Value
YhMessageBox	Opens a message box with the provided options or message content.	(options: YhMessageBoxOptions | string | VNode, appContext?: AppContext | null)	Promise<{ value?: string; action: YhMessageBoxAction }>
alert	Opens an alert dialog.	(message, title?, options?, appContext?)	Promise<void>
confirm	Opens a confirmation dialog.	(message, title?, options?, appContext?)	Promise<YhMessageBoxAction>
prompt	Opens an input dialog.	(message, title?, options?, appContext?)	Promise<{ value: string; action: 'confirm' }>
setDefaults	Updates the global default options used by later calls.	(defaults: YhMessageBoxOptions)	void

Message Box Options

Prop	Description	Type	Default
title	Title text.	string	'Tip'
message	Dialog content.	string | VNode | (() => VNode)	undefined
type	Dialog type.	YhMessageBoxType	undefined
dangerouslyUseHTMLString	Whether to render message as HTML.	boolean	false
iconType	State icon type.	YhMessageBoxState	undefined
icon	Custom icon.	string | Component | VNode	undefined
confirmButtonText	Confirm button text.	string	'确定'
cancelButtonText	Cancel button text.	string	'取消'
showCancelButton	Whether to show the cancel button.	boolean	true
showConfirmButton	Whether to show the confirm button.	boolean	true
showClose	Whether to show the top-right close button.	boolean	true
closeOnClickModal	Whether clicking the overlay closes the dialog.	boolean	true
closeOnPressEscape	Whether pressing Esc closes the dialog.	boolean	true
lockScroll	Whether to lock body scroll.	boolean	true
glass	Whether to enable glass mode.	boolean	false
center	Whether to center content layout.	boolean	false
roundButton	Whether to use rounded buttons.	boolean	false
draggable	Whether the dialog is draggable.	boolean	false
draggableBoundary	Whether dragging is kept inside the viewport.	boolean	true
width	Dialog width.	string | number	420
customClass	Custom class name.	string	undefined
inputPlaceholder	Input placeholder in prompt mode.	string	undefined
inputValue	Initial input value in prompt mode.	string	undefined
inputPattern	Input validation regex in prompt mode.	RegExp	undefined
inputValidator	Custom validation function in prompt mode.	(value: string) => boolean | string	undefined
inputErrorMessage	Validation error message in prompt mode.	string	undefined
beforeClose	Hook called before the dialog closes.	(action: YhMessageBoxAction, instance: YhMessageBoxInstance, done: () => void) => void	undefined
callback	Callback invoked by the function API after the dialog closes.	(action: YhMessageBoxAction, instance: YhMessageBoxInstance) => void	undefined
appContext	Vue app context used by the function API for inheritance.	AppContext | null	undefined
autofocus	Whether to autofocus when opening.	boolean	true
appendTo	Mount container used by the function API. If the selector cannot be found, it falls back to document.body.	string | HTMLElement	document.body
confirmButtonLoading	Whether the confirm button shows loading.	boolean	false
cancelButtonLoading	Whether the cancel button shows loading.	boolean	false
loadingIcon	Custom loading icon. Declared in the type, but the current implementation does not consume it.	string | Component | VNode	undefined
themeOverrides	Component-level theme overrides.	ComponentThemeVars	undefined

Events

This function entry does not expose component events.

Slots

This function entry does not expose component slots.

Expose

This function entry does not expose a template component instance. Runtime control is available through the YhMessageBoxInstance passed to beforeClose.

Message Box Instance

Prop/Method	Description	Type
confirmLoading	Loading state of the confirm button.	boolean
cancelLoading	Loading state of the cancel button.	boolean
open	Opens the popup.	(options: YhMessageBoxOptions) => void
close	Closes the popup.	() => void
setCallback	Registers the close callback used by the function API.	(cb: (res: { action: YhMessageBoxAction; value?: string }) => void) => void

Theme Variables

YhMessageBox supports themeOverrides. The stylesheet mainly consumes global tokens, while runtime overrides generate variables such as the following:

Variable	Description	Default
--yh-scrollbar-width	Scrollbar width compensation injected at runtime.	Runtime injected
--yh-message-box-bg-color	Variable generated from themeOverrides.bgColor.	No built-in stylesheet fallback
--yh-message-box-title-color	Variable generated from themeOverrides.titleColor.	No built-in stylesheet fallback

Type Exports

Name	Description
YhMessageBoxType	Message-box type union
YhMessageBoxData	Prompt result payload type
YhMessageBoxAction	Action union returned by confirm / prompt flows
YhMessageBoxState	Built-in state icon union
YhMessageBoxInstance	Runtime instance type passed to hooks
YhMessageBoxOptions	Options type for YhMessageBox(...)
YhMessageBoxHandler	Promise / handler return abstraction