div 全屏后，内部的 modal 无法正常显示

vue 3.2.x + antdv 3.2.x 

 

需求：

使用了某个复合组件，组件内按钮点击将使用弹窗展示某些信息

需求添加一个全屏按钮，点击后将复合组件全屏展示

 

问题：

刚拿到这个需求时想着，vueuse 几行代码搞定，也这么实现了

然而痛苦的事情出现了，全屏后 modal 不见了，退出全屏后发现其实是在的

 

定位：

弹出弹窗的功能是正常的，从渲染和 css 上着手定位

modal 的插入节点是 body 上，而全屏元素是无法被盖住的

复合组件不可能改，只能另辟蹊径

 

解决：

1. 不全屏复合组件，而是将 body 全屏，这样弹窗肯定能正常展示

2. 全屏状态下修改复合组件样式，宽高 100vw  100vh，在来个固定定位，给个大大的 z-index

3. 去页面验证，通过～