Dialog

Flagship dialog solution. Compatible with mainstream interaction standards, it features deep enhancements in drag boundary sense, Focus Trap, and Flagship Glassmorphism, providing ultimate visual and operational continuity for production environments.

Basic Usage

The simplest dialog display. Thanks to the built-in Smart Footer system, the component automatically renders standard operational buttons (Cancel/Confirm) by default, providing an out-of-the-box interactive experience without additional slots.

Basic Interaction

Centered Display

In addition to regular top offset, we provide more flexible viewport alignment strategies. Via the align-center and center attributes, you can achieve vertical centering or fullhorizontal alignment for different business scenarios.

Centered Modes

Fullscreen Display

Footer Alignment

You can control the horizontal alignment of footer buttons via the footer-align attribute. By default, button groups are right-aligned.

Footer Alignment

Header Alignment

Content Alignment

Premium Features

YH-UI provides rich enhancement configurations, supporting semantic type mapping, atomic loading state feedback, and fully transparent custom rendering controllers.

Semantic Types and Icons

Loading State and Async Control

Render Function Support

Destroy on Close (Performance Optimization)

Mouse Origin Animation

Advanced Interaction Features

YH-UI is dedicated to polishing every pixel of interactive feedback. This includes drag algorithms based on viewport physical safety boundaries and flagship-level glassmorphism visual rendering.

Top Interaction Enhancements

Use in Nuxt

YH-UI is perfectly adapted for Nuxt 3. You can use it directly in app.vue or any page.

Auto-import

If you are using unplugin-vue-components/resolvers, YhDialog will be automatically loaded on-demand with complete styles.

Nuxt Adaptation

Button Position Swap

Functional Calls

In some scenarios, you may want to skip v-model template declarations and launch a dialog directly via code. YH-UI provides a Promise-based functional call solution, supporting both Hook and static method forms.

Functional Call Demo

Async Feedback and Callbacks

Functional Button Swap

Methods of Use

You can choose the most appropriate method based on business complexity.

Composition API (Recommended)

Two-way binding via v-model, the most suitable way for Vue 3 design patterns.

Independent Import

Manually import YhDialog in sub-components.

import { YhDialog } from '@yh-ui/components'

API

Props

Prop	Description	Type	Default
v-model	Whether to display the dialog	boolean	false
title	Dialog title, supports render function	string | (() => VNode)	-
type	Dialog type	'success' | 'warning' | 'error' | 'info' | 'default'	'default'
show-icon	Whether to show semantic icons	boolean	true
loading	Whether to show body loading state	boolean	false
content	Dialog content, supports render function	string | (() => VNode)	-
action	Bottom operation area content, supports render function	(() => VNode)	-
transform-origin	Animation origin position	'mouse' | 'center'	'mouse'
width	Dialog width	string | number	'50%'
top	Distance from top (effective in non-centered mode)	string	'15vh'
fullscreen	Whether to display in fullscreen	boolean	false
align-center	Whether to vertically center in the viewport	boolean	false
center	Fully Centered Mode: Header, Body, Footer content all horizontally centered	boolean	false
glass	Enable flagship-level Acrylic (Glass) texture	boolean	false
draggable	Whether to enable physical drag functionality	boolean	false
overflow	Whether to allow dragging beyond viewport boundaries	boolean	false
modal	Whether to display background shield	boolean	true
lock-scroll	Lock viewport scroll when displayed	boolean	true
close-on-click-modal	Whether to close when clicking the background shield	boolean	true
close-on-press-escape	Whether to close when pressing ESC key	boolean	true
show-close	Whether to show close button	boolean	true
close-icon	Custom close icon name	string	'close'
destroy-on-close	Whether to destroy Dialog content on close	boolean	false
show-footer	Whether to show default footer buttons	boolean	true
cancel-text	Cancel button text	string	'Cancel'
confirm-text	Confirm button text	string	'Confirm'
before-close	Hook before closing, parameter is (done: () => void)	Function	-
teleport-to	Target DOM node to mount on	string | HTMLElement	'body'
header-align-center	Whether dialog title is horizontally centered	boolean	false
footer-align-center	Whether dialog footer buttons are horizontally centered	boolean	false
style	Overall custom style	string | CSSProperties	-
title-class	Custom title class name	string	-
title-style	Custom title style	string | CSSProperties	-
content-class	Custom body class name	string	-
content-style	Custom body style	string | CSSProperties	-
action-class	Custom footer class name	string	-
action-style	Custom footer style	string | CSSProperties	-
modal-class	Custom background shield class name	string	-
custom-class	Custom root container class name	string	-
z-index	Base layer stack start	number	2000
auto-focus	Whether to auto-focus the first focusable element	boolean	true
swap-footer-buttons	Whether to swap the position of "Confirm" and "Cancel" buttons	boolean	false
footer-align	Footer button alignment	'left' | 'center' | 'right'	'right'
header-align	Title alignment	'left' | 'center' | 'right'	'left'
content-align	Content alignment	'left' | 'center' | 'right'	'left'

Slots

Slot Name	Description
default	Dialog body content area
header	Custom header area. If used, the title attribute is ignored
footer	Custom bottom operational area. If used, built-in buttons are ignored

Events

Event Name	Description	Callback Parameters
update:modelValue	Triggered on visibility state change	(value: boolean)
open	Triggered when visibility state becomes true	-
opened	Triggered when opening animation finishes	-
close	Triggered when visibility state becomes false	-
closed	Triggered when closing animation finishes and content is destroyed	-
confirm	Triggered when default footer "Confirm" button is clicked	-
cancel	Triggered when default footer "Cancel" button is clicked	-
dragStart	Triggered when clicking header to start drag	(e: MouseEvent)
dragMove	Triggered continuously during dragging	(e: MouseEvent)
dragEnd	Triggered when dragging ends	(e: MouseEvent)

Expose

Method	Description	Type
visible	Reactive visibility state	Ref<boolean>
dialogRef	Dialog DOM reference	Ref<HTMLElement>
handleClose	Executes close logic (triggers before-close)	() => void
handleCancel	Executes cancel logic (triggers cancel event and closes)	() => void
handleConfirm	Executes confirm logic (triggers confirm event and closes)	() => void

Theme Variables (CSS Variables)

Customize the global vision of Dialog by overriding the following CSS variables.

Variable	Default Value	Description
--yh-dialog-margin-top	15vh	Dialog top margin
--yh-bg-color-overlay	#ffffff	Dialog background color
--yh-radius-lg	16px	Dialog corner radius
--yh-text-color-primary	#1a1a1a	Title color
--yh-color-success	#67c23a	Success icon/button color
--yh-color-warning	#e6a23c	Warning icon/button color
--yh-color-danger	#f56c6c	Error icon/button color
--yh-color-info	#909399	Info icon/button color
--yh-text-color-secondary	#909399	Close button color
--yh-text-color-regular	#4a4a4a	Body text color
--yh-border-color-light	rgba(0,0,0,0.05)	Close button hover background