Dialog 对话框

用于展示模态内容、确认流程或复杂表单，支持遮罩、关闭前回调、自定义背景和底部操作区域。

示例

基础用法

自定义背景

确认操作

API

Props

属性名	说明	类型	默认值	示例
model-value	是否显示 Dialog	`boolean`	`false`	`v-model="visible"`
append-to	挂载到哪个 DOM 元素	`string \| HTMLElement`	`'body'`	`append-to="#app"`
mask	是否显示遮罩层	`boolean`	`true`	`:mask="false"`
destroy-on-close	关闭时是否销毁 DOM	`boolean`	`false`	`destroy-on-close`
top	距离顶部的距离	`number \| string`	`'15vh'`	`top="20vh"`
width	弹框宽度	`number \| string`	`'fit-content'`	`width="520px"`
padding	弹框内边距	`number \| string \| Array<number \| string>`	`[16, 16]`	`:padding="[24, 32]"`
show-close	是否显示关闭按钮	`boolean`	`true`	`:show-close="false"`
title	标题文本；可被 `title` 插槽覆盖	`string`	`''`	`title="提示"`
align-center	是否垂直居中	`boolean`	`false`	`align-center`
close-on-click-modal	是否可点击遮罩关闭	`boolean`	`true`	`:close-on-click-modal="false"`
before-close	关闭前回调，resolve 后关闭	`() => Promise<unknown>`	`Promise.resolve()`	`:before-close="beforeClose"`
background	弹框背景色	`string`	`'#fff'`	`background="#f5f7fa"`
z-index	弹框层级	`number`	-	`:z-index="3000"`
fullscreen	是否全屏	`boolean`	`false`	`fullscreen`

Events

事件名	说明	回调参数	示例
update:model-value	显隐状态变化时触发	`(visible: boolean)`	`@update:model-value="onUpdate"`
close	`model-value` 变为 `false` 触发	-	`@close="onClose"`
closed	关闭动画结束后触发	-	`@closed="onClosed"`

Slots

插槽名	说明	作用域参数	示例
default	弹框主体内容	-	`<template #default>`
title	自定义标题内容	-	`<template #title>`
footer	自定义底部内容	-	`<template #footer>`

Exposes

方法名	说明	类型	示例
close	关闭弹框	`() => void`	`dialogRef.value?.close()`

关联布局导出

导出名	说明	适用场景
MtDialogConfirmLayout	取消、确认按钮组合的内容布局	Dialog 确认操作区

MtDialogConfirmLayout 属于 Dialog 的关联布局能力，适合在弹窗内容中组织确认和取消操作，不作为独立组件入口展示。

注意事项

重要操作建议配置 before-close 做二次确认或异步校验。
需要函数式创建弹窗时可使用 Poster，Dialog 本身主要用于声明式对话框。
多个弹层同时出现时建议通过 ConfigProvider 统一管理层级。