vue2+ElementUI碰到zoom后部分组件错位的问题
注意看啊
滚动条往下拉
这有一个下拉框
（它在这个分页组件里）
现在没有任何问题对吧
但是注意如果把这个包带的Zoom
就把它缩放一点
设置成0.
我们再来试一下
大家看就错位了
那其实这个问题之前呢我也分享过
但是呢只是解决了button的问题
导致呢仍然会有小伙伴遇到新的问题
所以这次在帮他解决的时候
就直接封装了一个比较公用的指令
大家可以在项目里
把它当成一个补丁文件
引进去然后呢先这样：
在main.js里边把它诱子一下
然后用的时候也很简单啊
比如说这个组件有问题
那我们就直接在这加一个v-fixZoom
我们来试一下
刷新好现在是没有问题
然后设置成0.
大家看，也没问题了
但是呢我刚才为什么说它“比较公用”？
因为我现在也只是搭了个框架
他现在是支持下拉框和分页组件
所以
如果大家遇到其他的组件也不支持
我给他说一下怎么去适配哈
那我们先来简单回忆一下
这BUG的原理哈
其实就是这个popover在弹出的时候啊
他定位的这个位置
是需要一个参照物的
比如说像这个下拉框
他就需要知道
这个下拉框是在整个网页的什么位置
他有一个x坐标和y坐标
所以当我们设置了Zoom之后
他获取的x坐标和y坐标就不准了
那么通过阅读原码
你会发现
其实他获取参照物位置的这个方法
用的就是JS原生的
这个getBoundingClientRect这个方法
所以我们的解决思路
就是想办法去覆盖有问题的这个元素
它原生的这个方法
然后在里边加入Zoom的元素（口误：因素）
重新计算一下
所以呢
我们怎么去扩展它不同的组件呢
我们在这根据它组件的名字
比如说我们要支持一个新的组件
那就在这加一个新的组件
比如说el-input
然后呢两个参数
第二个就是原声的HTML对象
然后啊
我们再根据这个组件的层次结构
（后边就不写了）
去返回一个数组
这个数组里是什么呢
就是所有你想覆盖
getBounding那个方法的
HTML元素就可以了
这个文件呢
我就放在这了
大家记不清
后边这个不用记
直接记这个就行了
在这里
第一个component就是这个el-input的vue对象
最后更新于