【ant】处理Ant Design 3.24.3版本Popover在父元素fixed的情况下跟随滚动条改变位置的问题

最新推荐文章于 2024-05-16 10:14:25 发布

原创最新推荐文章于 2024-05-16 10:14:25 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

解决思路专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种解决fixed定位下Popover组件显示问题的方法。通过设置getPopupContainer属性指向触发元素的父节点，确保Popover正确渲染在其触发元素附近。文章提供了具体的React实现代码示例。

背景：

1.fixed定位的底部

2.点击按钮，Popover 的visible设置为true

解决方案：

使用 getPopupContainer={triggerNode => triggerNode.parentNode}

render(){
        return (
            <Popover
                     visible={this.state.visible}
                     placement={this.props.placement}
                     getPopupContainer={triggerNode => triggerNode.parentNode}
                     onVisibleChange={this.handleClickChange}
                     content={<div style={{width:'250px'}}>
                         <p>确定从选品池中删除所有选中的商品？</p>
                         <div className="text-right margin-top-26">
                             <Button onClick={this.hide}>取消</Button>
                             <Button className="margin-left-16" type="primary" onClick={this.delete.bind(this)}>确认</Button>
                         </div>
                     </div>}
                     trigger="click">
                {this.props.children}
            </Popover>
        )
    }