ElmentUI Set to Prevent Clicking Overlay from Closing el-dialog Modal

By default, clicking outside the el-dialog component (the overlay) will close the component.

Method 1: (Local control)

Set the close-on-click-modal property to false to prevent clicking the overlay from closing the modal (default is true).

Note: When using the close-on-click-modal property, a colon ":" must be added before the property.

Method 2: (Local control)

Add the before-close property to prompt the user for confirmation before closing the dialog.

handleClose(done) {
    this.$confirm('确认关闭？').then(_ => {
        done();
    }).catch(_ => {});
}
Method 3: (Global configuration)

In main.js file:

import ElementUI from 'element-ui';
// Modify el-dialog default behavior to not close on overlay click
ElementUI.Dialog.props.closeOnClickModal.default = false;