eltooltip错位的一个解决方法
Demo
大家看这个滑块啊
他有一个Tootip
然后Tootip的效果就
鼠标悬停上去就显示
移出就不显示
然后呢这个Tootip还是可以彻底隐藏掉
大家看怎么也不显示
但是啊这个不够用
一个小伙伴想要一个这样的效果
就是鼠标旋停上去并不显示
只有在点击的时候才显示
然后进行拖拽
松手然后呢鼠标再旋停还是不显示
但是呢有一个BUG
大家注意看
这个时候再点击的时候
这个tooltep跑到最前面去了
稍微拖拽一点他就跟过来了
那老粉丝可能都知道
关于这个tooltip错位的问题
我曾经也讲过
具体的底层逻辑大家可以看这期视频
那我们就说今天这个问题怎么去解决
首先呢我们在这写一个ref
比如我们就叫slider
然后呢我们在
点击的时候先做一个输出
console.log(this.$refs.sld)
好我们把控制台打开啊
清空一下
注意点击这个找到这个组件了
然后呢我们把它展开
找到里边这个$refs
因为它组件嵌套组件
我们要找到最终那个poper（口误：tooltip）组件
大家看
这个slider不用管它这是一个HTML元素
我们找到这个button
这是一个vue组件
把它展开
再往下找它还有$refs
我们再把它展开
仍旧，这个button不用管它
往下找这个tooltip
大家看我们就找到这个tooltip了
tooltip里边它还会有一个updatePopper方法
我们就要调
这个方法来更新它位置就好了
我们右键选择这个copy property path
然后呢我们在这
点
把这个拿过来
然后把它剪切一下放到下边执行一下
调一下这个 updatePopper() 方法
然后这个是鼠标按下
我们在鼠标松开的时候再调用一下
好我们再来试一下啊
好我们来看啊，点击：出现
松开、
再点击大家看这个位置就不会串了
再滑这样这个问题就解决了
最后更新于
这有帮助吗？