【Dialog】elementul Dialog组件点击空白处不关闭，点击空白处执行方法，点击关闭按钮执行方法

问题:

有时候我们可能需要把dialog组件用来封装成一个组件，引入到我们的另一个父组件内，这样我们就需要传值了，而点击空白处点击关闭叉叉之类的他默认的都是直接改变dialogVisible的值为false。但是，因为是组件引入了，所以直接改变值会报错，需要用$emit去改父组件的变量为false才行。这里就用到提供的一个关闭前的方法了。

点击空白处不关闭

核心语句：:close-on-click-modal=“false”
这句话意思就是是否可以点击空白处关闭，false为不关闭

    <el-dialog
      title="选择题"
      :visible.sync="dialogVisible"
      :modal="false"
      top="3vh"
      width="600px"
      :close-on-click-modal="false"
    >

点击空白处执行方法，点击关闭按钮执行方法

核心语句：:before-close=“Cancel”
这句话代表关闭前执行的方法

因为点击空白处和点击关闭的叉叉按钮，都是会触发关闭的方法，所以我们直接在关闭前方法内写你需要执行的代码就可以了。

这里注意如果是组件传值的，你不能用关闭方法，elementul的dialog组件提供了一个close的关闭回调，这个你写了是会执行方法，但是还是会报错。报错原因就是因为你先点击触发了不允许直接改变子组件的变量的报错，然后再执行的关闭方法触发父组件的方法把变量改成为false然后弹框关闭了，这样效果确实是关闭成功了，但是会一直报错，可能会出现其他问题，所以不建议用这个方法，要用关闭前的。这样不会有报错。

    <el-dialog
      title="选择题"
      :visible.sync="dialogVisible"
      :modal="false"
      top="3vh"
      width="600px"
      :before-close="Cancel"
    >

    Cancel(){
      this.$emit('CancelDialog',false)
    },