Tui

Modal 模态框组件

Modal 用于在当前页面弹出一个模态对话框，常用于展示信息、操作确认或承载交互表单，支持 Esc 快捷关闭。

基础用法

最简单的用法，通过 v-model 控制模态框的显示和隐藏，支持按 Esc 快捷关闭。

打开后支持按 Esc 快捷关闭

示例代码

vue

简单使用标题和内容

通过 title 和 content 属性快速定义模态框内容。

示例代码

vue

完全自定义拓展的模态框

使用 title 和 content 插槽可自定义展示样式和结构。

示例代码

vue

自定义关闭按钮

使用 close 插槽自定义关闭按钮，替代默认的右上角关闭图标。

示例代码

vue

宽度高度 & 固定定位

通过 width 和 height 设置模态框尺寸，设置 fixed 属性可固定在页面中央。

示例代码

vue

点击遮罩层不关闭

通过 maskClosable 属性控制是否允许点击遮罩层关闭模态框（仍可按 Esc 关闭）。

示例代码

vue

beforeClose 关闭前拦截

通过 beforeClose 在关闭前进行拦截，支持区分关闭来源（关闭按钮、遮罩、Esc）并支持异步判断。嵌套必须使用 canTeleport

示例代码

vue

表单模态框

在模态框中放置表单内容，适用于用户信息录入、设置配置等场景。

示例代码

vue

确认对话框

展示不同类型的确认对话框，包括删除确认、保存确认和警告确认。

示例代码

vue

事件监听

展示模态框的打开和关闭事件监听，以及事件处理的实际应用。

示例代码

vue

属性 Props

modelValue

是否显示模态框

boolean

false

title

模态框标题

string

content

模态框内容

string

width

模态框宽度

string

520px

height

模态框高度

string

minHeight

模态框默认最小高度

string

180px

maskClosable

点击遮罩层是否关闭

boolean | string | Null

true

added 0.7.0

showClose

是否显示关闭按钮

boolean

true

padding

是否启用默认安全留白（同时作用于标题与内容区域），完全自定义时可关闭

boolean / string / number / null

16px

added 0.7.0

beforeClose

关闭前回调，返回 `false` 或 Promise resolve `false` 可阻止关闭

(context: { source: 'close-button' | 'mask' | 'esc' }) => boolean | void | Promise<boolean | void>

—

added 0.6.8

canTeleport

是否挂载到body

boolean

false

added 0.7.1, 嵌套时必须为true

maskClosable

点击遮罩层是否关闭

boolean

true

deprecated 0.7.0

safePadding

是否启用默认安全留白（同时作用于标题与内容区域），完全自定义时可关闭

boolean

true

added 0.6.4, changed 0.6.9 -> true, deprecated 0.7.0

事件 Events

模态框真正关闭时触发（beforeClose 允许后）

void

插槽 Slots

default

自定义 modalMain 内容

title

自定义标题内容

content

自定义内容区域

footer

自定义底部按钮区域

自定义关闭按钮

基础用法

简单使用标题和内容

完全自定义拓展的模态框

自定义关闭按钮

宽度高度 & 固定定位

点击遮罩层不关闭

beforeClose 关闭前拦截

表单模态框

确认对话框

事件监听

属性 Props

事件 Events

插槽 Slots