对话框 Modal

常见状态的 Modal

演示

二次确认弹窗 info/error

居中对话框 deafult

默认对话框 deafult

全屏弹窗 full

弹窗嵌套二次确认对话弹框

手动进行关闭

API

名称类型可选值默认值说明
typeStringinfo | error| deafult | fullinfo类型控制
closeableBooleantrue | falsefalse是否隐藏X图标
autoCloseBooleantrue | falsetrue是否自动关闭弹窗
v-model:visibleBooleantrue | false默认关闭弹窗的打开和开起
titleString''默认值为空弹窗标题
titleOverflowBooleantrue | falsetrue弹窗标题超过一行部分是否...展示 false 为换行
align-centerBooleantrue | falsetrue弹窗水平垂直对齐 默认高度元素撑开,height优先级最高
widthNumbernumber640deafult 类型弹窗的自定义宽度
heightNumbernumber580deafult 类型弹窗的自定义高度
maxWidthNumbernumber640deafult 类型弹窗最大宽度设置
maxHeightNumbernumber0deafult 类型弹窗最大高度设置
contentString''默认值为空二次弹窗内容
escableBooleantrue | falsetrue是否支持按键 esc 关闭
topYNumber/Stringpx | %%距离顶部距离效
zIndexNumber大于 0组件计算的zIndex层级
footerBooleantrue | falsetruetype 类型为 deafult或者full 时,false不展示底部操作按钮
modalClassNameString''''背景蒙层自定义的 className
contentClassNameString''''内容区域自定义类名
needScrollbarBooleantrue | falsetrue是否使用组件滚动条
scrollbarAttrsScrollbarPropsScrollbarProps{}滚动条属性和方法

Events

名称参数说明
close(e: Event)关闭图标点击回调
cancel(e: Event)取消按钮点击回调
submit(e: Event)确定按钮点击回调

Slot

名称说明
headerModal标题区自定义
contentModal内容区自定义
footerModal按钮操作区自定义

最近更新于: