全屏模式下,antd下拉组件不展示(dropdown,select,tooltip)

959 阅读1分钟

原因:下拉内容默认根据body进行定位的计算,但是全屏模式下,由于定位层级变化,导致下拉被遮挡

解决办法:github.com/ant-design/…

使用官方提供的API:getPopupContainer,指定容器进行挂载

image.png 但是这种办法需要改好多处,所以官方也提供了全局设置的方法:4x.ant.design/components/…

eg:

<ConfigProvider getPopupContainer={t => t?.parentElement}>
   <App />
</ConfigProvider>

上述的方法解决不了modal框不显示问题,那么举一反三,我们可以通过该方法进行解决,antd的Modal组件有个getContainer的API

image.png

这样我们就解决了这个问题,可喜可贺可喜可贺 image.png