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

最近项目中有一个页面需要做全屏效果，但是发现全屏后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="cancel"
	    :getPopupContainer="getPopupContainer" //加上这句代码
	  >
	    <a href="#">Delete</a>
	  </a-popconfirm>
	  
	  <a-popover
	  	placement="left"
	  	trigger="click"
	  	:getPopupContainer="getPopupContainer"//加上这句代码
		>
	  	<a-button type="primary">Click me</a-button>
	  </a-popover>
	  
	  <a-select
	  	@change="handleEmpStateChange"
	  	v-model="curLeaveState"
	  	:getPopupContainer="getPopupContainer"
	  	>
	  	<a-select-option
	  		:value="item"
	  		v-for="item in stateList"
	  		:key="item"
	  	>{{item}}</a-select-option>
	  </a-select>
	  
	  <!--其他有getPopupContainer属性的组件同理-->
</div>

Q:像Modal和Notification组件没有getPopupContainer属性要怎么办呢？
通过官方文档得知还有一个属性叫getContainer 用于配置渲染节点的输出位置

getContainer属性使用

	  <a-modal
	  	:getContainer="getPopupContainer"//加上这句代码
	  	v-model="visible" 
	  	title="Basic Modal" 
	  	@ok="handleOk">
	      <p>Some contents...</p>
	      <p>Some contents...</p>
	      <p>Some contents...</p>
	  </a-modal>

//点击事件
  <a-button type="primary" @click="click">
    Click
  </a-button>
  
//方法实现
	click(item) {
		const self = this
		this.$error({
			title: 'Title！',
	        content: 'content',
	        getContainer: self.getPopupContainer(),//加上这句代码
	        onOk() {}
		})
	},

今天调试的时候发现上面的代码块会有以下错误:
Invalid prop: type check failed for prop “getContainer”. Expected Function, got HTMLDivElement

原因是 getContainer 希望接收到的值是 () => HTMLNode 这个样子的。
而我们self.getPopupContainer()返回的是一个 HTMLDivElement 。
因此对代码块做了如下调整

//方法实现
	click(item) {
		const self = this
		this.$error({
			title: 'Title！',
	        content: 'content',
	        getContainer: () => self.getPopupContainer(),//函数写法
	        onOk() {}
		})
	},