目前流行的弹窗，不管是
<dialog visible="visible">
<user-dialog />
</dialog>
还是
<template>
<dialog visible="visible"></dialog>
</template>
<script>
visible = false
open(){
this.visible = true
}
close(){
this.visible = true
}
</script>
都难受至极。
第一种写法
- 在使用 dialog 的时候，dialog 就已经加载好了，但是我还不需要，所以造成不必要的资源浪费(可忽略)，以及在代码里看着这堆东西太不优雅了
<dialog ref="dialog1" :visible="dialog1" />
<dialog ref="dialog2" :visible="dialog2" />
<dialog ref="dialog3" :visible="dialog3" />
<dialog ref="dialog4" :visible="dialog4" />
......
- visible 会留在调用组件里，调用者有 N 个 dialog 就有 N 个变量
data(){
return {
dialog1: false,
dialog2: false,
dialog3: false,
......
}
}
- 想在关闭 dialog 的时候做一些事情很难受，要么 watch dialog1~N 这个变量，要么给所有 dialog 写
<dialog @close="close" /> -
在关闭弹窗时，接收返回的变量很难受
<dialog :visible.sync="visible"> <user-dialog @close="close" /> </dialog> data(){ return { visible: true } } close(event){ console.log(event) this.visible = false }
第二种写法
-
一旦引入组件，组件便开始 mount 了，生命周期也执行了，如果调用者引入了 N 个 dialog ，那性能可想而知，还不如第一种写法
-
因失去了生命周期的特性，导致关闭弹窗的时候需要你自己重置数据，做清理
-
而且你开不能利用生命周期来做数据加载，因为你还没打开弹窗，90%的业务场景是没必要加载数据的，所以你还要在 open 里自己加载
-
还有一些问题我暂时想不起来，先略吧
忍了好久了，终于把 https://material.angular.io/components/dialog/overview 的 dialog 给挪过来了，所说不太完美，但是至少满足我的痛点了。
使用文档可以看我写的demo，API 参考的话可以看Dialog | Angular Material
各位如果也有同样的痛苦的话，可以 fork 到自己项目里去改一下就可以用了。
写得不是很完美，仅作为一个想法、思路。
ps：真的想吐槽手动初始化 Vue 这个过程，难受至极，离开了文档的操作，啥也不是。
Select Language