search

wswmsword / postcss-mobile-forever

一款 PostCSS 插件，将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
https://wswmsword.github.io/examples/mobile-forever/vanilla/
MIT License
325 stars 19 forks source link

antd dropdown展示错误 #49

Open Jackierchan opened 3 months ago

Jackierchan commented 3 months ago

https://mobile.ant.design/zh/components/dropdown 这个组件是fixed定位的，展开后展示的不对 image 配置如下 { viewportWidth: 375, maxDisplayWidth: 500, // desktopWidth: 600, // landscapeWidth: 425, // minDesktopDisplayWidth: null, // maxLandscapeDisplayHeight: 450, appSelector: '#mobileRoot', border: false, disableDesktop: true, disableLandscape: true, disableMobile: false, exclude: [/src\/Pc\//, /src\/Pc\/..css$/, /node_modules/], // 忽略 src/PC 目录下的文件, include: null, unitPrecision: 5, selectorBlackList: [], valueBlackList: [], rootContainingBlockSelectorList: [], propList: [ '', '!font-size', '!height', '!line-height', '!border', '!border-radius', '!box-shadow', ], // 转换的属性列表， '*' 表示全部属性都转换 mobileUnit: 'vw', side: { width: 190, gap: 18, selector1: null, selector2: null, selector3: null, selector4: null, }, comment: { applyWithoutConvert: 'apply-without-convert', rootContainingBlock: 'root-containing-block', notRootContainingBlock: 'not-root-containing-block', ignoreNext: 'mobile-ignore-next', ignoreLine: 'mobile-ignore', }, customLengthProperty: { rootContainingBlockList_LR: [], rootContainingBlockList_NOT_LR: [], ancestorContainingBlockList: [], }, experimental: { extract: false, minDisplayWidth: 375, }, }

wswmsword commented 3 months ago

用开发者工具找到 position: fixed 所在元素的选择器，然后把选择器名称加到配置的 rootContainingBlockSelectorList 里，比如 rootContainingBlockSelectorList: ['.test'] 这样

Jackierchan commented 3 months ago

rootContainingBlockSelectorList: ['.adm-dropdown-popup'], 加了这一行之后还是没有什么变化

wswmsword commented 3 months ago

不好意思我讲错了…主要是要找下 width: 100% 所在的选择器名称，这个 width: 100% 应该和 fixed 定位一起作用，找到之后加到 rootContainingBlockSelectorList 里。

Jackierchan commented 3 months ago

.adm-dropdown-popup这个元素就是width: 100%的 image

wswmsword commented 3 months ago

好的，方便把你这个包发给我吗，我过会儿看下

Jackierchan commented 3 months ago

这个是公司内部代码，不太方便传输，可以share屏幕一起看下吗

wswmsword commented 3 months ago

我又仔细看了下，你这个 antd 组件的样式里，position: fixed 和 width: 100% 在同一选择器里，所以不需要 rootContainingBlockSelectorList 来手动指定，插件会自己判断。 我估计是你把 antd 的样式给忽略转换了，你配置有这一行：

exclude: [/src/Pc//, /src/Pc/..css$/, /node_modules/], // 忽略 src/PC 目录下的文件,

可能是第三个元素 /node_modules/ 把所有 node_modules 里的样式都忽略了，这里面也包括了 antd 样式，所以你试着处理下这个正则试试。89999999999999