问题:
最近在写一个弹窗组件,弹窗组件里面又嵌套着一个弹窗,当打开这个子弹窗时发现会出现一个遮罩层导致无法点击
解决方法:
需要在子弹窗上增加一个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修饰符,实际上就是一个语法糖**。