autofit.js
autofit.js copied to clipboard
LarryZhu-dev
elementui有关于popper，下拉错位
据了解，elementUI 等使用的是 floating-ui / popper.js 插件 实现的弹出层，但是popper.js在计算弹出元素位置时，没有考虑页面整体缩放偏移的情况，所以在autofit.js的缩放方案中，会出现偏移错位的问题，目前autofit.js有计划使用其他方式解决偏移，但近期还没有好的方案，你可以尝试去floating-ui提个issue。
@zhengdechang 目前已知国内主流组件库都不支持autofit.js 但是有一些国外的小众UI库是支持的： Vuestic UI ：https://github.com/epicmaxco/vuestic-ui 其实没有一些，目前只发现这一个🤡
@zhengdechang 目前已知国内主流组件库都不支持autofit.js 但是有一些国外的小众UI库是支持的： Vuestic UI ：https://github.com/epicmaxco/vuestic-ui 其实没有一些，目前只发现这一个🤡
有没有react的呢
antd作为国内比较热门的组件库，能否抽空做一下适配呢，大佬。 现在antd遇到的组件有Popover、dropdown、select下拉
@zhengdechang 我这暂时没发现呢
antd作为国内比较热门的组件库，能否抽空做一下适配呢，大佬。 现在antd遇到的组件有Popover、dropdown、select下拉
@zhengdechang 我这暂时没发现呢
这个我这边解决不了哈，需要antd去做适配呢
antd作为国内比较热门的组件库，能否抽空做一下适配呢，大佬。 现在antd遇到的组件有Popover、dropdown、select下拉
@zhengdechang我暂时没有发现呢
getPopupContainer 挂载一下
antd作为国内比较热门的组件库，能否抽空做一下适配呢，大佬。 现在antd遇到的组件有Popover、dropdown、select下拉
@zhengdechang我暂时没有发现呢
getPopupContainer 挂载一下
elementUI 有办法处理吗
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
})
目前看应该没问题了
