【AntDesign】解决antdesign控件在div全屏下不显示的问题

原创

于 2021-12-23 16:43:23 发布 · 4.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

最近项目中有一个页面需要做全屏效果，但是发现全屏后antdesign的组件弹出层不展示（其实是有的，只是被全屏效果覆盖了）
全屏效果实现可以参考：
我的文章-【VUE】vue实现div全屏效果

解决方法

通过阅读AntDesign的官方文档得知有弹出层的组件都有一个名为 getPopupContainer 的属性即浮层渲染父节点，默认是渲染到 body 上
Tooltip、Popconfirm、Popover 、Select等组件都有该属性

那么我们只需要将这个属性指定到我们全屏的Div上即可：

重点代码

声明一个方法方便调用

getPopupContainer() {
   
   
      return document.getElementById('fullscreen')
    },

getPopupContainer属性使用

<div id="fullscreen" class="fullscreen" ref="fullscreen">
<!-- 需要全屏区域 id和上面方法中一致 -->
	  <a-popconfirm
		title="Are you sure delete this task?"
	    ok-text="Yes"
	    cancel-text="No"
	    @confirm="confirm"
	    @cancel="cance