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

[LarryZhu-dev]

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

@zhengdechang我暂时没有发现呢

getPopupContainer 挂载一下

elementUI 有办法处理吗

实测[email protected]已解决，贴出方案供大家参考：

在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