Modal 对话框
模态对话框，用于重要信息确认或表单填写。支持预设确认/危险模式、自定义页头页脚以及丰富的交互配置。
基础用法
通过 v-model 控制显示/隐藏，使用 footer 插槽自定义底部按钮。
确认模式
设置 preset 为 confirm 可自动生成「取消/确定」按钮。
危险确认模式
设置 preset 为 danger，自动显示危险图标和红色确认按钮。
自定义宽度
通过 width 属性设置对话框宽度，支持数字(px)和字符串。
禁止遮罩关闭
设置 :mask-closable=false 后点击遮罩层不会关闭对话框。
无关闭按钮
设置 :closable=false 隐藏右上角关闭按钮。
自定义页头
通过 header 插槽自定义标题区域内容。
简洁内容
配合居中文字，适合简单的提示确认场景。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | boolean | — | 是否显示（必填，支持 v-model） |
title | string | — | 标题 |
width | number | string | 520 | 宽度(px)，也可传字符串如 "60%" |
closable | boolean | true | 是否显示右上角关闭按钮 |
maskClosable | boolean | true | 点击遮罩层是否关闭 |
card | boolean | true | 是否显示卡片边框 |
center | boolean | true | 是否垂直居中显示 |
preset | 'default' | 'confirm' | 'danger' | 'default' | 预设模式：confirm 自动生成取消/确定按钮，danger 自动显示危险图标和红色按钮 |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
update:modelValue | (val: boolean) => void | 显隐状态变化 |
close | () => void | 关闭时触发 |
confirm | () => void | 点击确定按钮时触发（需 preset 为 confirm/danger） |
cancel | () => void | 点击取消按钮时触发（需 preset 为 confirm/danger） |
afterEnter | () => void | 打开动画结束后触发 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 对话框主体内容 |
header | 自定义标题区域 |
footer | 底部按钮区域（使用 preset 时不需手动设置） |