ElementUI Slider组件实时获取滑动value值

一、需求:某项目需要通过Slider滑块的值来实时改变汽车模型的速度

说白了就是滑块拖到哪,模型速度就加到多少,但必须是随拖随动(这可以参考播放器的音量调节,拖动的时候就改变音量,而不需要拖动后松开鼠标左键才能调整)

二、我们先看看官方文档给的一个获取slider滑动后value值的方法

文档截图
我的代码我的代码
@change方法写上,文档也说明了 使用鼠标拖曳时,只在松开鼠标后触发。所以我每次滑动滑块并不能即时改变模型速度,只有在鼠标左键松开后才能改变,这样会显得很突兀,就像模型在猛踩油门一样

三、解决办法:

1、还记得拖动滑块时会有个小弹框在组件上方,显示你目前拖到哪里了吗?文档截图
2、他的显示其实是有提供方法,见下图:
文档截图
3、这里return出来的val就是赋值给小弹框用的,也就是目前滑动到的value值,他既然可以实时显示,所以我觉得这个值就可以为我们所用,所以就在控制台打印了看了一下:我的代码
打印的截图
4、很明显,我拖动了两次,两次拖动的结果也是显而易见。change方法只能获取到最后松开鼠标的值,而自带的format-tooltip属性就能获取到实时的value值,因为官方给他本身的定义就是一个方法,不断的在返回value给tooltip使用

四、结论

想要动态实时获取滑块的值就用format-tooltip属性
想要松开鼠标后获取滑块的值就用change方法

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值