Ant Design Vue V3 Modal 对话框

本文介绍了Ant Design Vue V3中的Modal对话框组件。它适用于需要用户在不离开当前页面的情况下处理事务的情况。Modal提供了丰富的API,包括事件、Modal.method()函数等,但需要注意的是,Modal.method()创建的组件无法直接获取全局注册组件、context、Vuex等上下文信息,且数据不是响应式的。解决方法包括传递context或使用函数返回保持响应性。
摘要由CSDN通过智能技术生成

模态对话框。

何时使用 #

需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

另外当需要一个简洁的确认框询问用户时,可以使用 Modal.confirm() 等语法糖方法。

API#

#

参数 说明 类型 默认值 版本
afterClose Modal 完全关闭后的回调 function
bodyStyle Modal body 样式 object {}
cancelText 取消按钮文字 string| slot 取消
centered 垂直居中展示 Modal Boolean false
closable 是否显示右上角的关闭按钮 boolean true
closeIcon 自定义关闭图标 VNode | slot -
confirmLoading 确定按钮 loading boolean
destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false
footer 底部内容,当不需要默认底部按钮时,可以设为 :footer="null" string|slot 确定取消按钮
forceRender 强制渲染 Modal boolean false
getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body
keyboard 是否支持键盘 esc 关闭 boolean true
mask 是否展示遮罩 Boolean true
maskClosable 点击蒙层是否允许关闭 boolean true
maskSt
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值