🌏 Translated with the assistance of DeepSeek and ChatGPT

Dialog

When a dialog is triggered, the dialog will pop up.

TIP

Pixel-style components nested inside a Dialog no longer need pollSizeChange and render correctly on their own.

Basic Usage

The visible property controls the display and hiding of the dialog. When visible is passed, it enters controlled mode. If not passed or set to undefined, it is in uncontrolled mode, and the defaultVisible property can be provided as the default value.

Hide source code

Form in Dialog

This is just an example of using a form inside a dialog. As demonstrated by the example, you can directly pass attrs such as class and style through to the dialog container element.

Hide source code

Functional Usage

If you have fully registered the component library, you can use it in the following ways:

window.$dialog;
Inside a Vue component: getCurrentInstance().appContext.config.globalProperties.PixeliumVue.dialog;
Import from @pixelium/web-vue.

When using on-demand import, you can also import Dialog from @pixelium/web-vue/es for usage.

Hide source code

Asynchronous Confirmation

When onBeforeOk is provided, the confirmation process will wait for onBeforeOk to complete. If the result is not false, subsequent code will be executed.

Hide source code

API

Dialog Function

After calling a function on the Dialog, a Promise<boolean> is returned. If the dialog is closed via confirmation, the promise is fulfilled with true; otherwise, it is false.

type DialogReturn = Promise<boolean> & {
	close: () => void
}

// ...
// Dialog
{
	[key in DialogOptions['type'] & string]: (
		options:
			| (Omit<DialogOptions, 'type'> & Omit<EmitEvent<DialogEvents>, 'update:visible'>)
			| string
	) => DialogReturn
}

Attrs

Just as demonstrated in the example above example, when used as a component, you can directly pass attributes such as class and style through to the dialog container element.

DialogOptions

Attribute	Type	Optional	Default	Description	Version
content	`ValidContent`	False		Dialog content.	0.1.0
title	`ValidContent`	True		Dialog title.	0.1.0
icon	`ValidVNodeContent`	True		Dialog title icon.	0.1.0
footer	`ValidVNodeContent`	True		Dialog footer area.	0.1.0
type	`'info' \| 'success' \| 'warning' \| 'error' \| 'normal' \| 'confirm' \| 'notice'`	True	`'normal'`	Dialog type.	0.1.0
closable	`boolean`	True	`true`	Whether to display the close button in the top-right corner.	0.1.0
mask	`boolean`	True	`true`	Whether to display the mask layer.	0.1.0
maskClosable	`boolean`	True	`true`	Whether the dialog can be closed by clicking the mask layer.	0.1.0
escToClose	`boolean`	True	`true`	Whether the dialog can be closed by pressing the ESC key.	0.1.0
showCancel	`boolean`	True		Whether to display the cancel button. If not set, it is influenced by the `type` field—only displayed when the type is `'confirm'`.	0.1.0
okText	`string`	True		Text content of the confirm button.	0.1.0
cancelText	`string`	True		Text content of the cancel button.	0.1.0
showFooter	`boolean`	True	`true`	Whether to display the dialog footer area.	0.1.0
zIndex	`number`	True		The `z-index` property of the dialog.	0.1.0
root	`string \| HTMLElement`	True	`'body'`	The root element to which the dialog is mounted.	0.1.0
okButtonProps	`ButtonProps & EmitEvent<ButtonEvents> & RestAttrs`	True		Properties of the confirm button.	0.1.0
cancelButtonProps	`ButtonProps & EmitEvent<ButtonEvents> & RestAttrs`	True		Properties of the cancel button.	0.1.0
maskProps	`Omit<MaskProps, 'zIndex'>`	True		Properties of the mask layer.	0.1.0
containerProps	`RestAttrs`	True		Properties of the dialog container element.	0.1.0
headerProps	`RestAttrs`	True		Properties of the dialog header area element.	0.1.0
bodyProps	`RestAttrs`	True		Properties of the dialog content area element.	0.1.0
footerProps	`RestAttrs`	True		Properties of the dialog footer area element.	0.1.0

DialogProps

Attribute	Type	Optional	Default	Description	Version
visible	`boolean \| null`	True		Controls the display of the dialog (controlled mode), supports `v-model`.	0.1.0
defaultVisible	`boolean \| null`	True		Default value for controlling the display of the dialog (uncontrolled mode).	0.1.0
title	`string`	True	`''`	Dialog title.	0.1.0
closable	`boolean`	True	`true`	Whether to display the close button in the top-right corner.	0.1.0
mask	`boolean`	True	`true`	Whether to display the mask layer.	0.1.0
maskClosable	`boolean`	True	`true`	Whether the dialog can be closed by clicking the mask layer.	0.1.0
escToClose	`boolean`	True	`true`	Whether the dialog can be closed by pressing the ESC key.	0.1.0
showCancel	`boolean`	True	`true`	Whether to display the cancel button. If not set, it is influenced by the `type` field—only displayed when the type is `'confirm'`.	0.1.0
okText	`string`	True		Text content of the confirm button.	0.1.0
cancelText	`string`	True		Text content of the cancel button.	0.1.0
boolean	`boolean`	True	`false`		0.1.0
showFooter	`boolean`	True	`true`	Whether to display the dialog footer area.	0.1.0
root	`string \| HTMLElement`	True	`'body'`	The root element to which the dialog is mounted.	0.1.0
zIndex	`number`	True		The `z-index` property of the dialog.	0.1.0
destroyOnHide	`boolean`	True	`false`	Whether the dialog content is destroyed after hiding.	0.1.0
okButtonProps	`ButtonProps & EmitEvent<ButtonEvents> & RestAttrs`	True		Properties of the confirm button.	0.1.0
cancelButtonProps	`ButtonProps & EmitEvent<ButtonEvents> & RestAttrs`	True		Properties of the cancel button.	0.1.0
maskProps	`Omit<MaskProps, 'zIndex'>`	True		Properties of the mask layer.	0.1.0
containerProps	`RestAttrs`	True		Properties of the dialog container element.	0.1.0
headerProps	`RestAttrs`	True		Properties of the dialog header area element.	0.1.0
bodyProps	`RestAttrs`	True		Properties of the dialog content area element.	0.1.0
footerProps	`RestAttrs`	True		Properties of the dialog footer area element.	0.1.0

DialogSlots

Slot	Description	Version
default	Dialog content.	0.1.0
title	Dialog title.	0.1.0
icon	Dialog title icon.	0.1.0
footer	Dialog footer area.	0.1.0

DialogEvents

Event	Parameter	Description	Version
update:visible		Used to update the `visible` value in controlled mode.	0.1.0
beforeOk		For async confirmation. Must return a value of type `Promise<boolean \| void> \| boolean \| void` to indicate success. Confirmation is successful if the result after `await` is not `false`.	0.1.0
ok	`event: MouseEvent`	Callback triggered when the dialog is successfully closed via confirmation.	0.1.0
cancel	`event: MouseEvent \| KeyboardEvent`	Callback triggered when the dialog is closed via cancellation, close button, mask layer, ESC key, etc.	0.1.0
open		Callback triggered when the dialog opens.	0.1.0
afterOpen		Callback triggered after the dialog opening animation ends.	0.1.0
close		Callback triggered when the dialog closes.	0.1.0
afterClose		Callback triggered after the dialog closing animation ends.	0.1.0

DialogExpose

Attribute	Type	Optional	Default	Description	Version
close	`() => void`	False		Close the dialog.	0.1.0
open	`() => void`	False		Open the dialog.	0.1.0

ValidContent, ValidVNodeContent

export type ValidContent = string | ((...args: any[]) => VNode | string | JSX.Element | null | void)
export type ValidVNodeContent = (...args: any[]) => VNode | JSX.Element

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

Dialog ​

Basic Usage ​

Form in Dialog ​

Functional Usage ​

Asynchronous Confirmation ​

API ​

Dialog Function ​

Attrs ​

DialogOptions ​

DialogProps ​

DialogSlots ​

DialogEvents ​

DialogExpose ​

ValidContent, ValidVNodeContent ​

RestAttrs ​

EmitEvent ​

Dialog

Basic Usage

Form in Dialog

Functional Usage

Asynchronous Confirmation

API

Dialog Function

Attrs

DialogOptions

DialogProps

DialogSlots

DialogEvents

DialogExpose

ValidContent, ValidVNodeContent

RestAttrs

EmitEvent