elementui有关于popper，下拉错位

[gg-guang]

No description provided.

[LarryZhu-dev]

据了解，elementUI 等使用的是 floating-ui / popper.js 插件 实现的弹出层，但是popper.js在计算弹出元素位置时，没有考虑页面整体缩放偏移的情况，所以在autofit.js的缩放方案中，会出现偏移错位的问题，目前autofit.js有计划使用其他方式解决偏移，但近期还没有好的方案，你可以尝试去floating-ui提个issue。

[zhengdechang]

哪个ui支持的下拉框和弹框适配这个 @LarryZhu-dev

[LarryZhu-dev]

@zhengdechang 目前已知国内主流组件库都不支持autofit.js
但是有一些国外的小众UI库是支持的：
Vuestic UI ：https://github.com/epicmaxco/vuestic-ui
其实没有一些，目前只发现这一个🤡

[zhengdechang]

@zhengdechang 目前已知国内主流组件库都不支持autofit.js 但是有一些国外的小众UI库是支持的： Vuestic UI ：https://github.com/epicmaxco/vuestic-ui 其实没有一些，目前只发现这一个🤡

有没有react的呢

[LarryZhu-dev]

@zhengdechang 我这暂时没发现呢

[zhengdechang]

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

@zhengdechang 我这暂时没发现呢

[LarryZhu-dev]

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

@zhengdechang 我这暂时没发现呢

这个我这边解决不了哈，需要antd去做适配呢

[TopAlien]

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

@zhengdechang我暂时没有发现呢

getPopupContainer 挂载一下

[guosuwei]

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

@zhengdechang我暂时没有发现呢

getPopupContainer 挂载一下

elementUI 有办法处理吗

[ezewu]

目前，有弹出的，就跑错位了，是一个问题

[gemdeng]

Naive UI也会出现这个问题

[wanglei1020]

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
})

目前看应该没问题了

[JunIce]

楼上老哥的方案实测可用 版本 2.5.13

[wyman51t]

感谢诸位大佬[email protected]实测可用

[LarryZhu-dev]

使用 ignore 传入子串匹配选择器可解决弹出层偏移问题，在 element-plus 中，有一个id为el-popper-container-xxx的元素，将其传入 ignore 即可，对于 element-ui ，需要将弹出元素挂载到 body 根节点，或其他任何不在 autofit 影响下的节点即可，如 element 弹出层挂载到 body， autofit 挂载到 #app，参考文档：https://auto-plugin.github.io/index/autofit.js/api.html#canvas-%E4%BA%8B%E4%BB%B6%E7%83%AD%E5%8C%BA%E5%81%8F%E7%A7%BB%E3%80%81element%E7%AD%89%E5%BC%B9%E5%87%BA%E5%B1%82%E4%BD%8D%E7%BD%AE%E5%81%8F%E7%A7%BB%E9%97%AE%E9%A2%98

#67 #77