关于element-ui弹窗组件el-dialog,阻止点击遮罩层关闭的问题,以及全局处理和局部处理的方法
前言
在使用element-ui的组件时,有时候根据项目需求,需要修改组件默认的属性值。我们公司项目的需要在el-dialog
弹窗组件中写入表单数据,由于表单数据比较多,有时候误触了el-dialog
的遮罩层就关闭弹窗了,导致辛辛苦苦填入的数据被清空重置。所以需要阻止弹窗遮罩层的关闭事件。
下面针对使用npm安装使用element-ui
1. 全局配置
npm引入,直接在main.js文件中写入如下代码
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
// 修改 el-dialog 默认点击遮照不关闭
Element.Dialog.props.closeOnClickModal.default = false;
这里只是针对
el-dialog
弹窗组件进行了配置。如果想要配置其他组件不知道如何配置的话,可以在main.js中通过console.info(Element.Dialog)打印一下
2. 局部配置
通过给el-dialog
弹窗添加close-on-click-modal
属性,属性值改为 false 可以禁止点击遮罩关闭弹窗(默认是true)
<el-dialog
:title="title"
:visible.sync="open"
width="500px"
append-to-body
:close-on-click-modal="false"
></el-dialog>
注意:这里的
close-on-click-modal
属性前需要写入:
。
全局配置也可以修改其他组件的默认值,区别在于默认值的格式不一样,不清楚的时候可以通过console.info查看。