【AntDesign】解决antdesign控件在div全屏下不显示的问题
最近项目中有一个页面需要做全屏效果,但是发现全屏后antdesign的组件弹出层不展示(其实是有的,只是被全屏效果覆盖了)全屏效果实现可以参考:我的文章-【VUE】vue实现div全屏效果解决方法通过阅读AntDesign的官方文档得知有弹出层的组件都有一个名为 getPopupContainer 的属性 即浮层渲染父节点,默认是渲染到 body 上Tooltip、Popconfirm、Popov
最近项目中有一个页面需要做全屏效果,但是发现全屏后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() {}
})
},
更多推荐
所有评论(0)