请问一下，用的antd-mobile，Popup这个组件该如何处理？

[atom258]

请问一下大佬，Popup这个组件该怎么处理？谢谢

[wswmsword]

现在你的项目里 Popup 啥样，具体应该展示什么样子？

[atom258]

https://mobile.ant.design/zh/components/popup 就这个组件，没有办法处理

[wswmsword]

我试了下 vite 创建的 React 项目安装 antd-mobile 能正常展示，下面是截图：

这个是项目文件夹，您可以点击下载：antd-mobile.zip 您项目里展示是什么样子的呢？方便截个图吗，可以上传项目的话也可以压缩传过来看下。

[atom258]

想让Popup 弹出层也可以限制最大宽度

[atom258]

nextjs.zip

[wswmsword]

在配置里加上这一行：

+  "rootContainingBlockSelectorList": [".adm-popup-body-position-bottom"]

这个是因为插件转换的条件是在同一个 class 里含 position: fixed 的，其它的长度属性会进行转换，如果长度属性和 position: fixed 分散在不同的 class 里，虽然在 HTML 里是同一个元素，但这时长度属性就不会按照绝对定位的转换方式转换了，这时就要手动指定哪一个 class 虽然没有绝对定位属性，但计算方式依然按照句对定位的方式计算，就需要这里的 rootContainingBlockSelectorList 了。

[wswmsword]

在配置里加上这一行：

+  "rootContainingBlockSelectorList": [".adm-popup-body-position-bottom"]

这个是因为插件转换的条件是在同一个 class 里含 position: fixed 的，其它的长度属性会进行转换，如果长度属性和 position: fixed 分散在不同的 class 里，虽然在 HTML 里是同一个元素，但这时长度属性就不会按照绝对定位的转换方式转换了，这时就要手动指定哪一个 class 虽然没有绝对定位属性，但计算方式依然按照句对定位的方式计算，就需要这里的 rootContainingBlockSelectorList 了。

这里面的值 .adm-popup-body-position-bottom，如果项目用的是外部的 UI 库，比如 antd-mobile，或者 vant，都要你在开发的时候，打开开发者工具，检查一下是哪一个 class 需要转换，然后填到配置的 rootContainingBlockSelectorList 中；如果是您自己的组件，您自己肯定知道哪一个 class 是需要填写到 rootContainingBlockSelectorList 中的。