element-ui子弹窗出现遮罩层无法点击

问题:

最近在写一个弹窗组件,弹窗组件里面又嵌套着一个弹窗,当打开这个子弹窗时发现会出现一个遮罩层导致无法点击

解决方法:

需要在子弹窗上增加一个append-to-body属性

总结:

平时应该多看看官方文档,以免掉坑

关于弹窗Dialog组件:

Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。
如果 visible 属性绑定的变量位于 Vuex 的 store 内，那么 .sync 不会正常工作。此时需要去除 .sync 修饰符，同时监听 Dialog 的 open 和 close 事件，在事件回调中执行 Vuex 中对应的 mutation 更新 visible 属性绑定的变量的值。

关于.sync修饰符:

.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。
一般情况下，想要实现父子组件间值的传递，通常使用的是 props 和自定义事件 $emit 。
其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件j监听获取子组件传过来的值。
如果想要简化这里的代码，可以使用**.sync修饰符，实际上就是一个语法糖**。