ant-design-vue/components/modal/index.en-US.md

5.4 KiB

API

Property Description Type Default
afterClose Specify a function that will be called when modal is closed completely. function -
bodyStyle Body style for modal body element. Such as height, padding etc. object {}
cancelText Text of the Cancel button string|slot Cancel
centered Centered Modal Boolean false
closable Whether a close (x) button is visible on top right of the modal dialog or not boolean true
confirmLoading Whether to apply loading visual effect for OK button or not boolean false
destroyOnClose Whether to unmount child components on onClose boolean false
footer Footer content, set as :footer="null" when you don't need default buttons string|slot OK and Cancel buttons
forceRender Force render Modal boolean false
getContainer Return the mount node for Modal (instance): HTMLElement () => document.body
mask Whether show mask or not. Boolean true
maskClosable Whether to close the modal dialog when the mask (area outside the modal) is clicked boolean true
maskStyle Style for modal's mask element. object {}
okText Text of the OK button string|slot OK
okType Button type of the OK button string primary
okButtonProps The ok button props, follow jsx rules {props: ButtonProps, on: {}} -
cancelButtonProps The cancel button props, follow jsx rules {props: ButtonProps, on: {}} -
title The modal dialog's title string|slot -
visible Whether the modal dialog is visible or not boolean false
width Width of the modal dialog string|number 520
wrapClassName The class name of the container of the modal dialog string -
zIndex The z-index of the Modal Number 1000

events

Events Name Description Arguments
cancel Specify a function that will be called when a user clicks mask, close button on top right or Cancel button function(e)
ok Specify a function that will be called when a user clicks the OK button function(e)

Note

The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set destroyOnClose on it.

Modal.method()

There are five ways to display the information based on the content's nature:

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

The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:

Property Description Type Default
autoFocusButton Specify which button to autofocus null|string: ok cancel ok
cancelText Text of the Cancel button string Cancel
centered Centered Modal Boolean false
class class of container string -
content Content string|vNode -
icon custom icon (Added in 1.40.0) string|slot <Icon type="question-circle">
iconType Icon type of the Icon component (deperated after 1.40.0) string question-circle
keyboard Whether support press esc to close Boolean true
mask Whether show mask or not. Boolean true
maskClosable Whether to close the modal dialog when the mask (area outside the modal) is clicked Boolean false
okText Text of the OK button string OK
okType Button type of the OK button string primary
okButtonProps The ok button props ButtonProps -
cancelButtonProps The cancel button props ButtonProps -
title Title string|vNode -
width Width of the modal dialog string|number 416
zIndex The z-index of the Modal Number 1000
onCancel Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed function -
onOk Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed function -

All the Modal.methods will return a reference, and then we can update and close the modal dialog by the reference.

const modal = Modal.info();

modal.update({
  title: 'Updated title',
  content: 'Updated content',
});

modal.destroy();
  • Modal.destroyAll

Modal.destroyAll() could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)

const router = new VueRouter({ ... })

// router change
router.beforeEach((to, from, next) => {
  Modal.destroyAll();
})