Element: [bug report] drag the slider component outside the critical point and release the mouse. The tooltip prompt does not disappear normally
Element UI version
0.1.0
OS/Browsers version
Win7 / Chrome 79.0.3945.88
Vue version
2.6.11
Reproduction Link
None
Steps to reproduce
在slider组件上拖动滑块至临界点，鼠标继续拖动至组件外边松开，滑块的tooltip弹窗依旧存在，没有消失。官网的事例中也存在此问题
What is Expected?
在slider组件上拖动滑块至临界点，鼠标继续拖动至组件外边松开，滑块的tooltip弹窗依旧存在，没有消失。官网的事例中也存在此问题
What is actually happening?
鼠标拖动至组件界外松开后，tooltip应当消失
Mr-xue
All 4 comments
Translation of this issue:
Element UI version
0.1.0
OS/Browsers version
Win7 / Chrome 79.0.3945.88
Vue version
2.6.11
Reproduction Link
None
Steps to reproduce
Drag the slider on the slider component to the critical point, and then drag the mouse to the outside of the component to release. The tooltip pop-up window of the slider still exists and does not disappear. This problem also exists in the case of official website
What is Expected?
Drag the slider on the slider component to the critical point, and then drag the mouse to the outside of the component to release. The tooltip pop-up window of the slider still exists and does not disappear. This problem also exists in the case of official website
What is actually happening?
After the mouse is dragged outside the component boundary and released, the tooltip should disappear
element-bot
on 19 Mar 2020
Hi, I got this problem too, by reading the source code I found the solution.
First, add a ref property for your slider compnent, like the following,
<el-slider
@change="change"
ref="timeSlider">
</el-slider>
then, in the change listener of el-slider, do this,
change(val){
// 消除可能不会消失的时间弹出
this.$refs["timeSlider"].$refs["button1"].handleMouseLeave();
this.$refs["timeSlider"].$refs["button2"].handleMouseLeave();
}
hope it can help.
cheng-github
on 9 May 2020
Hi, I got this problem too, by reading the source code I found the solution.
First, add a ref property for your slider compnent, like the following,
<el-slider @change="change" ref="timeSlider"> </el-slider>then, in the change listener of el-slider, do this,
change(val){ // 消除可能不会消失的时间弹出 this.$refs["timeSlider"].$refs["button1"].handleMouseLeave(); this.$refs["timeSlider"].$refs["button2"].handleMouseLeave(); }hope it can help.
Tks Man~~
This method can solve my problem, but if i use more el-slider components, it's still troublesome.
Hope the team fix this bug quicky.
Mr-xue
on 15 May 2020
If they should fix that, I suggest to let the issue open
SimonMayerhofer
on 18 May 2020
Related issues
zhaokuohaha
·
56Comments
subo-romens
·
30Comments
stevepop
·
35Comments
DreamFox
·
48Comments
arzcl
·
34Comments
Most helpful comment
Hi, I got this problem too, by reading the source code I found the solution.
First, add a ref property for your slider compnent, like the following,
<el-slider @change="change" ref="timeSlider"> </el-slider>then, in the change listener of el-slider, do this,
change(val){ // 消除可能不会消失的时间弹出 this.$refs["timeSlider"].$refs["button1"].handleMouseLeave(); this.$refs["timeSlider"].$refs["button2"].handleMouseLeave(); }hope it can help.