vue element-ui el-dialog组件的一些坑

这是我开发项目的时候 碰到的问题，因为公司对页面要求比较多，所以踩了很多坑，真的烧脑啊。

问题1：如果弹窗 点击外面 不让窗口关闭

在el-dialog标签里加上 :close-on-click-modal="false" (默认是 可以关闭的)

问题2：有时候发现组件套多了，弹窗的遮罩层的层级在弹窗之上 (看审查元素 会 发现组件是在 最外面引入的)

在el-dialog标签里加上 :modal-append-to-body='false'

问题3：这个问题很坑，如果公司要求 点击遮罩层需要关闭弹窗，你会发现在弹窗里 引入的组件 点击后也会 关闭弹窗（网上解决方法都是用JS解决的，个人觉得很麻烦）

那么你只需要 el-dialog写在外面，标签里面直接引入组件页面 在引入的组件页面里 写你的代码 就可以解决了。（看下图）

问题4：el-dialog 如果加了  :modal-append-to-body='false' 解决了 遮罩层的问题，那么在el-dialog里再用 MessageBox 弹框 会发现 遮罩层 又存在关不掉了！

那么只要在 el-dialog标签里 添加 :append-to-body="true"  最后作者试了下 设置 :append-to-body="true" 是最好的方法，直接把  :modal-append-to-body='false' 删掉就行了。

喜欢的话，大家点赞收藏一下吧！