elTooltip莫名错位的bug原因及解决方案
大家看
这个按钮会触发一个popover在这显示
只不过这个popover
被我改成了一个手动模式
不点这个按钮是不会消失的
这个都没有问题
然后呢
我现在想在这个按钮上加一个tooltip
提示一下说这是一个消息
所以呢我们需要在这套一层tootip
然后把这个slot放外头
因为这个slot
是这个pop over的槽
打开这个可以了对吧
但是注意我把这个popover点开之后
我在悬浮上了他还有这个提示
这个就不太合理
所以我就想
怎么能让他在弹出popover的时候
禁用他这个tooltip
其实正好他有一个disabled属性
我们来试一下这样行不行
我们让disabled等于他的这个model
正好他展开的时候他是禁用的
我们来试一下
大家看啊
哎没了
大家注意啊我在给他关闭的时候
大家看这tootip又跑下面去了
相当于他这个绝对定位的top、left没了
现在是在跟随文档流
只有我再重新悬浮上去的时候
大家看 他就正常了
那为什么会这样呢我们来看一下源码
源码里这个render方法
在渲染这个组件的时候
他没有给这个层
去渲染这个top、left的这两个CSS
他在什么时候去设置这个样式的呢
大家看
他在这个mounted的之后
会有一个updatePoper
他在这来设置的
那这里边的代码
我们就不一点点演示了哈
大家知道这个方法就负责更新定位的
然后还有一个地方就是在哪呢
打开它上面做了一个mixins
在这个pop里边
就在这个组件里边
这里边在什么时候会更新呢
大家看他是有个watch
watch这个showPoper变量
这个showPoper变了他就会更新这个位置
showPoper在哪变呢
在这！他也是watch value
也就是说
这个tooltip显示与隐藏这个值变了
他就会更新showPoper
那换句话说
也就说这个隐藏与显示变了
他才会更新这个位置
但是啊
我们回过头来看我们这个地方
只是更新他的这个disabled属性
他的那个显示隐藏的value
根本没有变化
所以呢他就没有更新上去他的位置
那到这呢
有同学可能就会想到一个方法
简单呀
我们在这去更新一下这个（tooltip的）model值
这个就是那个value吗
我们在这让他等于一个 非（showToolTip）
然后再让他变回来对吧
但是呢直接这样变是不行的
我们来试一下
大概直接变不行
他检测不到变化
所以啊
我们需要把它放到一个setTimeout里面
来试一下
然后呢
100吧我们试一下
嘿大家看这样就可以了
这样呢是第一个方法
我觉得这样呢也比较麻烦
还有一种方法呢就是我们在这啊
把这些删掉
直接去找到他的这个r e f
r e f s点这个
点
然后调他的updatePoper方法
我们再来试一下
好这样就可以了
最后更新于