Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

vue

<my-dialog v-model="visible" title="提示" status="info">
  <p>内容</p>
</my-dialog>

状态类型

通过 status 设置 info / success / warning / error / danger。

vue

<my-dialog v-model="visible" title="保存成功" status="success">...</my-dialog>
<my-dialog v-model="visible" title="修改须知" status="warning">...</my-dialog>
<my-dialog v-model="visible" title="提交失败" status="error">...</my-dialog>

位置

position 支持 auto / top / center / bottom。

vue

<my-dialog v-model="visible" position="auto" />
<my-dialog v-model="visible" position="top" />
<my-dialog v-model="visible" position="center" />
<my-dialog v-model="visible" position="bottom" />

背景变体

overlayType 控制遮罩样式：opaque（不透明）、blur（模糊）、transparent（透明）。

vue

<my-dialog v-model="visible" overlay-type="blur">模糊遮罩</my-dialog>
<my-dialog v-model="visible" overlay-type="transparent">无遮罩</my-dialog>
<my-dialog v-model="visible" overlay-type="opaque">不透明遮罩（默认）</my-dialog>

自定义背景

通过 overlayColor 完全自定义遮罩颜色，比如删除账户时的红色警示背景。

vue

<my-dialog
  v-model="visible"
  title="删除账户"
  status="danger"
  overlay-type="blur"
  overlay-color="rgba(239, 68, 68, 0.15)"
  width="400px"
>
  <p>此操作不可撤销...</p>
</my-dialog>

尺寸

size 预设 large / small。

vue

<my-dialog v-model="visible" size="large">720px</my-dialog>
<my-dialog v-model="visible" size="small">360px</my-dialog>

组件结构

通过 <teleport to="body"> 挂载，根元素 .my-dialog 内含：遮罩层 __overlay、内容面板 __content（头部 __header 含 icon 和 title 及关闭按钮 __close、主体 __body、底部 __footer 含操作按钮 __btn）。

CSS 类名

类名	说明
`.my-dialog`	根元素（全屏定位容器）
`.is-auto`	自动定位
`.is-center`	居中定位
`.is-top`	顶部定位
`.is-bottom`	底部定位
`.is-fullscreen`	全屏模式
`.is-large`	大尺寸
`.is-small`	小尺寸
`.is-info`	info 状态
`.is-success`	success 状态
`.is-warning`	warning 状态
`.is-error`	error 状态
`.is-danger`	danger 状态
`.my-dialog__overlay`	遮罩层
`.is-opaque`	不透明遮罩（默认）
`.is-blur`	模糊遮罩
`.is-transparent`	透明遮罩
`.my-dialog__content`	对话框内容面板
`.my-dialog__header`	头部区域
`.my-dialog__header-left`	头部左侧（图标+标题）
`.my-dialog__icon-wrap`	状态图标容器
`.my-dialog__title`	标题文字
`.my-dialog__close`	关闭按钮
`.my-dialog__body`	主体内容区
`.my-dialog__footer`	底部按钮区
`.my-dialog__btn`	操作按钮
`.is-primary`	确认按钮样式
`.is-danger`	危险按钮样式

API

属性	说明	类型	默认值
modelValue	是否显示	`boolean`	`false`
title	标题	`string`	—
status	状态类型（左上角图标）	`'info' \| 'success' \| 'warning' \| 'error' \| 'danger'`	—
position	弹出位置	`'auto' \| 'top' \| 'center' \| 'bottom'`	`'auto'`
overlayType	遮罩类型	`'opaque' \| 'blur' \| 'transparent'`	`'opaque'`
size	预设尺寸	`'large' \| 'default' \| 'small'`	—
width	自定义宽度	`string`	`'480px'`
overlayColor	自定义遮罩颜色	`string`	—
confirmText	确定按钮文字	`string`	`'确定'`
cancelText	取消按钮文字	`string`	`'取消'`
hideCancel	隐藏取消按钮	`boolean`	`false`
showClose	显示关闭按钮	`boolean`	`true`
modalClose	点击遮罩关闭	`boolean`	`true`
closeOnPressEscape	ESC 关闭	`boolean`	`true`
beforeClose	关闭前回调	`(done: () => void) => void`	—
transitionName	动画名称	`string`	`'my-dialog-fade'`
appendTo	挂载目标	`string`	`'body'`

事件	说明
update:modelValue	显示状态变更
open / close	打开 / 关闭
opened / closed	动画完成后
confirm / cancel	确定 / 取消

插槽	说明
default	对话框内容
title	标题区域
icon	标题图标
footer	底部操作区

Dialog 对话框 ​

基础用法 ​

状态类型 ​

位置 ​

背景变体 ​

自定义背景 ​

尺寸 ​

组件结构 ​

CSS 类名 ​

API ​