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

发布时间 2023-08-09 09:39:44作者: yuhui_yin

vue 3.2.x + antdv 3.2.x 

 

需求:

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

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

 

问题:

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

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

 

定位:

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

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

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

 

解决:

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

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

3. 去页面验证,通过~