Comment on page
el-select下拉错位（下）
今天终于可以把这个BUG
详细的给大家讲完了
大概现在这个就是不对齐的
那我们都知道了哈
导致这个BUG的原因之一就是这个popper
就是这个弹出层啊
被挂在到了这个ESSELECT里面
这个就是这个整个的弹出层
大家看它的父级元素就是这el-select
所以呢这个弹出层的位置
就是相对于这个el-select来说的
我们也可以看出来这个el-select
现在的position是等于relative的
所以呢我们会发现
他现在有个top等于40像素
life他有个5像素
40像素没问题
但他为什么总是会有一个5像素呢
大家看
这个的life就是
好那我们接下来就去深挖一下
到底为什么
这个的弹出层的left的就是5像素
首先呢我们先找到这个组件
在这里我们点进去
打开点进去以后呢
我们往下拉
找到他弹出层的那一块的代码
在这里
el-select-menu
ref=popper 就说明这是一个弹出层
我们继续往里点
然后呢大家看这有一个插槽
说明这是一个相对比较公用的组件
然后呢这有个mixins
他把这个
组合进来了
那我们再来看这个组件里边
这个组件里边呢往下看的话
我们会发现他有一个监听
showPopper 的 这个这个变量
这里边呢他会调用updatePopper
所以呢我们再找一下这个updatePopper
在这里
这里边呢
他又调用了这个组件update方法
这个组件在哪呢
就在上面
大家看！他在这导入的
所以我们再去点进去
我们来搜一下update的方法在哪里
大家看 在这
update
然后我们就简单的
大概的先看一下这些代码
offsets看意思就是获取一些尺寸的东西
然后呢
boundaries
看字面也是在获取一些边界的东西
我们先不管他
那我们怎么调呢
我们就在最后啊把这个data打印出来
先看看它的数据结构
在这打印可不可以呢
首先我们试一下
刷新一下
大家看 没有任何输出
我再来一遍
对吧没有输出
那为什么呢
这里边有个技巧啊
我们先来看一下这个文件的路径
大家看他现在是在一个src目录里面
好我们复制一下他的文件名
然后呢我们再去找一下相同文件名
还有一个在lib下边 大家看
好我们去这里边改
还是我们找到 update方法
在这里边
我们在这下边
把这个data先打出来
看一下它的数据结构
大家看，他就打出来了
打出来两个
我们先不管他为什么打出来两个哈
然后呢我们展开后边这个
boundaries
offsets
大家看啊这个boundaries他就有一个left
等于
我们再来看一下上面正常的
清空一下
我们还是展开后面这个
大家看 这个boundaries
它的left就不是5，是-
包括我们再来看一下它的
offsets offsets里边注意看有个popper
popper的left是
然后我们再来看一下
有问题的
同样展开之后还是第二个
然后offsites paper
paper里还是有个left
这个left就是
点offests 然后呢 点popper 然后点
left
我们来看一下
打开5 再看这个
好接下来怎么办呢
我们把这个代码往上放
好我们再展开
还是5 我们再往上放
打开这个时候是0点几几斤
说明这个时候还没问题
再来看上面这个
他也是0点几几几
比如说在下边这个组件里边
走到这一步还是正常的
再往下走
走到这就不正常了
我们在这做一些标记
横线然后呢
加一些0吧
我们测一下
注意看
上面的时候还是
做完这个方法就变成5了
我们再来看正常的
上面是0点几
下面是
所以这个是没问题的
那就说明下面这个select
走到这个方法会对他有影响
那这个方法里面都有什么呢
我先把这个注掉
去看这个方法
这个方法呀就是去循环
执行了一些modifier
那这modifier在哪复的值呢
我们就一层一层找
最终我们就能找到这个
在这从这开始就有很多的modifier
大家看这是 applyStyle
咱们下shift
然后我就一个一个的在里边console.log
试哈就试到这个
大家看
这个modifier
他在这有一个life的输出
我们在这console log一下 left
大家看
这个是
同样是123的没问题的这个组件呢
他展开的时候这块输出的是
有问题
记得那个组件呢他展开的时候
在这输
出的是
所以我们就来看一下他有什么区别
打开
这是我之前写的注释哈 我们把它打开
这就是有一个判断
如果他小于他走这里边
我就把这两个变量都打出来了
好我们再来试一下
好我们展开这个有问题的注意看
0和5，0小于5吗
0当然小于
所以他会走下边
他会让这个left他等于谁啊
等于这两个数里面比较大的那个
因为0小于5等于大的就是谁呢
他就变成5了
我们再来看另一个
0小于248吗
当然不小于
所以他不会走这里边
所以啊问题就集中在了
这个 boundaries.left 的到底是什么
这个boundaries边界到底是什么
那我们来看一下
就是当我们展开这个组件的时候
这个弹出层他不能超出的一个范围
不能超出什么范围呢
就是这个屏幕的边缘
也就是浏览器的四周
但是大家可别忘了
现在这个popper是被挂在到了
这个el-select
里面
所以呢这个popper的布局
是相对于这个el-select的
那么对于这个popper来说
的x轴为0是哪呢
就是这条线
那么它的y轴为0呢
就是这条线
好所以对于这个popper来说
如果我们想把它放到左侧的边缘
他的
x轴坐标应该是多少呢
我们假设
他的offsetLeft
是400PX 那么
他的left应该是多少呢
应该是
0减去400PX
也就是说-400像素
同理呢他的顶部边界值也是这样的
用0减去offsetTop来得到
所以
我们再回去找刚才这个帮坠
式复制的那转代码
我们回到这个update方法
在这里
在这里给boundaries赋值，我们点进去
往下找
大家看
这个boundaries等于left的是0减去这个
再减 scrollLeft
这个scrollLeft可以不管他
但问题就出现在这里
为什么呢
因为下边这个
它取不到 offsetLeft
关于这个啊
我前两期视频已经铺垫过了
大家看一下
我们检查一下这个元素
这个是ears like
但是呢大注意它的父级元素是什么呢
大家看
现在是position:relative
同时呢他有一个margin
所以呢他现在
是获取不到
offsetLeft 我们可以验证一下
大家看是
我们再来试一下正常的这个
选中这个
我们选中这个el-select 在这里
然后呢
点offset left
大概
这个是正确的
所以要想从根源上来解决这问题
我们就要想办法让他能拿到这个
el-select的
他的offsetLeft
怎么处理
这个我
前两期视频都已经详细的讲过了哈
我们来试一下
我先把这个margin-left去掉吧
好我们再来试一下
offsetLeft 大家看 就能取到了
所以呢
最终的解决方法就是我们要在这个
样式里边
写一个这样的样式
然后position等于 initial
或者我们强制让他的margin-left于0
最近更新 1yr ago