解决antd、element等遇到的组件有Popover、dropdown、select下拉错位的问题

[LarryZhu-dev]

          > > > antd作为国内比较热门的组件库，能否抽空做一下适配呢，大佬。 现在antd遇到的组件有Popover、dropdown、select下拉

@zhengdechang我暂时没有发现呢

getPopupContainer 挂载一下

elementUI 有办法处理吗

实测element-ui@2.15.14已解决，贴出方案供大家参考：

在element-ui/lib/utils/popper.js的第421行下新增代码：

// 修复使用autofit.js导致的popover错位问题
// 这里的body对应的是autofit.init({el: 'body‘})
const targetEl = document.querySelector('body')
const scaleMatch = targetEl.style.getPropertyValue('transform').match(/scale\((.*?)\)/)
// 获取缩放比例
const scale = scaleMatch ? +scaleMatch[1] : 1
Object.keys(referenceOffsets).forEach((key) => {
    referenceOffsets[key] = referenceOffsets[key] / scale
})

刷新页面，元素位置已经是正确的了

因为直接改的源码，需要使用patch-package包把修改以补丁的形式保存起来，并纳入git管理，具体用法自行百度。

其他版本不知道代码位置会不会变，可以自己找找，应该变化不大。贴个图：

再来记录一下。后来发现在弹框比较贴边时定位还是不对，又经过一番排查，原来是还有一处没改： 在element-ui/lib/utils/popper.js的第564行（上面代码加过后）下新增代码：

// 修复使用autofit.js导致的popover错位问题
// 这里的body对应的是autofit.init({el: 'body‘})
const targetEl = document.querySelector('body')
const scaleMatch = targetEl.style.getPropertyValue('transform').match(/scale\((.*?)\)/)
// 获取缩放比例
const scale = scaleMatch ? +scaleMatch[1] : 1
Object.keys(boundaries).forEach((key) => {
  boundaries[key] = boundaries[key] / scale
})

目前看应该没问题了

Originally posted by @wanglei1020 in https://github.com/LarryZhu-dev/autofit.js/issues/55#issuecomment-2263374959

[LarryZhu-dev]

感谢 #55 @wanglei1020

[hellorayza]

弹出层对页面元素显示和定位上一般没有太大影响，是否可以考虑ignore忽略适配？ 如果可行的话，一般UI组件会对弹出层组件ID/类名选择器加随机数，是否可以考虑加上规则匹配特性？

[LarryZhu-dev]

弹出层对页面元素显示和定位上一般没有太大影响，是否可以考虑ignore忽略适配？ 如果可行的话，一般UI组件会对弹出层组件ID/类名选择器加随机数，是否可以考虑加上规则匹配特性？

ignore不可行哈

[zhangjingyu1024]

antd也有这个问题，感觉还是不要动依赖包的内容了，可以打补丁，下面是我针对antdv写的补丁测试还ok，其他组件库应该也可以根据类名改改：

使用：

[LarryZhu-dev]

@zhangjingyu1024 感谢提供思路

[1liza]

antd也有这个问题，感觉还是不要动依赖包的内容了，可以打补丁，下面是我针对antdv写的补丁测试还ok，其他组件库应该也可以根据类名改改：

使用：

我也遇到这个问题，但是不太会写，能提供下完整外码嘛，非常感谢！！！

[zhangjingyu1024]

antd也有这个问题，感觉还是不要动依赖包的内容了，可以打补丁，下面是我针对antdv写的补丁测试还ok，其他组件库应该也可以根据类名改改： 使用：

我也遇到这个问题，但是不太会写，能提供下完整外码嘛，非常感谢！！！

autofitfix.zip

[1liza]

antd也有这个问题，感觉还是不要动依赖包的内容了，可以打补丁，下面是我针对antdv写的补丁测试还ok，其他组件库应该也可以根据类名改改： 使用：

我也遇到这个问题，但是不太会写，能提供下完整外码嘛，非常感谢！！！

autofitfix.zip

非常感谢！！！

[LarryZhu-dev]

弹出层对页面元素显示和定位上一般没有太大影响，是否可以考虑ignore忽略适配？ 如果可行的话，一般UI组件会对弹出层组件ID/类名选择器加随机数，是否可以考虑加上规则匹配特性？

这位兄弟验证了自己的想法，我之前说的 ignore 不可行，但是他已经做出来了，大家可以期待下下一个版本，见 PR #74 , 这里解决了偏移问题，但是会导致弹出层大小不跟随缩放，整体看起来是可用的

[LarryZhu-dev]

v3.2.0 已基本支持矫正，参见文档：https://larryzhu-dev.github.io/autoLarryPages/autofit.js/api.html#element%E7%AD%89%E5%BC%B9%E5%87%BA%E5%B1%82%E5%81%8F%E7%A7%BB