Vue项目element-ui弹窗组件el-dialog，阻止点击遮罩层关闭

关于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查看。