从原理上看antd中getPopupContainer"失效"的问题

2020年03月02日Web前端

在antd中,一般用到Select、Popover等组件时,getPopupContainer属性都会用到,他是用来表示浮层渲染的位置。

问题

在实际项目中使用时,发现在有竖直滚动条的时候,依旧会导致选择内容框与选择输入框“脱节”。因为增加了getPopupContainer树形,新生成的内容选择框应该在dom内,且做了相对的定位,应该是跟着滚动条走才对,但实际并不是这样。

查了下也没找到好的处理方式,只能看下他是怎么实现的了。

原理

getPopupContainer表示渲染的挂载点,默认为body。

他的最终实现在rc-trigger中,打开其index.js文件,在this.getContainer方法中,创建了一个div,设置其position为absolute,left和top为0,并将宽度设置为100%。最后根据渲染元素是谁,再appendChild。

var props = _this4.props;

var popupContainer = document.createElement('div');
popupContainer.style.position = 'absolute';
popupContainer.style.top = '0';
popupContainer.style.left = '0';
popupContainer.style.width = '100%';
var mountNode = props.getPopupContainer ? props.getPopupContainer((0, _reactDom.findDOMNode)(_this4)) : props.getDocument().body;
mountNode.appendChild(popupContainer);
return popupContainer;

所以实际上getPopupContainer原理就是将内容放在一个absolute的元素中,插入到getPopupContainer元素中。

处理方法

所以,为了getPopupContainer后的元素能够跟着滚动内容滚动,我们需要在scroll元素内层的元素设置相对层就行了。

公众号又开始玩耍啦,请扫码关注!

微信公众号