ant-design-vue/components/modal/index.zh-CN.md
2018-12-09 17:34:27 +08:00

3.6 KiB
Raw Blame History

API

参数 说明 类型 默认值
afterClose Modal 完全关闭后的回调 function
bodyStyle Modal body 样式 object {}
cancelText 取消按钮文字 string| slot 取消
centered 垂直居中展示 Modal Boolean false
closable 是否显示右上角的关闭按钮 boolean true
confirmLoading 确定按钮 loading boolean
destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false
footer 底部内容,当不需要默认底部按钮时,可以设为 :footer="null" string|slot 确定取消按钮
getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body
keyboard 是否支持键盘esc关闭 boolean true
mask 是否展示遮罩 Boolean true
maskClosable 点击蒙层是否允许关闭 boolean true
maskStyle 遮罩样式 object {}
okText 确认按钮文字 string|slot 确定
okType 确认按钮类型 string primary
okButtonProps ok 按钮 props, 遵循jsx规范 {props: ButtonProps, on: {}} -
cancelButtonProps cancel 按钮 props, 遵循jsx规范 {props: ButtonProps, on: {}} -
title 标题 string|slot
visible(v-model) 对话框是否可见 boolean
width 宽度 string|number 520
wrapClassName 对话框外层容器的类名 string -
zIndex 设置 Modal 的 z-index Number 1000

事件

事件名称 说明 回调参数
cancel 点击遮罩层或右上角叉或取消按钮的回调 function(e)
ok 点击确定回调 function(e)

注意

<Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请设置 destroyOnClose

Modal.method()

包括:

  • Modal.info
  • Modal.success
  • Modal.error
  • Modal.warning
  • Modal.confirm

以上均为一个函数,参数为 object具体属性如下

参数 说明 类型 默认值
autoFocusButton 指定自动获得焦点的按钮 null|string: ok cancel ok
cancelText 取消按钮文字 string 取消
centered 垂直居中展示 Modal Boolean false
class 容器类名 string -
content 内容 string|vNode
iconType 图标 Icon 类型 string question-circle
maskClosable 点击蒙层是否允许关闭 Boolean false
keyboard 是否支持键盘esc关闭 boolean true
okText 确认按钮文字 string 确定
okType 确认按钮类型 string primary
okButtonProps ok 按钮 props ButtonProps -
cancelButtonProps cancel 按钮 props ButtonProps -
title 标题 string|vNode
width 宽度 string|number 416
zIndex 设置 Modal 的 z-index Number 1000
onCancel 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function
onOk 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function

以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。

const modal = Modal.info();

modal.update({
  title: '修改的标题',
  content: '修改的内容',
});

modal.destroy();