问题描述

最近在做一个视频回放的进度条，会根据视频当前播放进度，实时更新slide的绑定值，导致如下问题：

当鼠标拖动滑块按钮的时候，如果应用程序中使用过v-model或:value实时改变滑块的绑定值时，不管你把滑块拉到哪里放下，change事件返回的都是改变的那个值（视频播放进度的值），而不是你真实拖动的值。但是当你点击进度的时候，却可以获取到真实的值。

<el-slider

              class="schedule"

              :show-tooltip="false"

              v-model="current"

              :max="total"

              @change="SetPlayPos"

            >

            </el-slider>

暂时解决方式

通过火狐浏览器的调试器，发现类.el-slider__button-wrapper绑定了如下事件，这个类名是控制滑动按钮的拖拽行为的。有了这些，我们只需要鉴定这个类的mousedown,mousemove,mouseup事件，当mousemove时我们记录一下滑动条的拖拽行为（用于控制进度条是否实时更新，当进度条不更新的时候，我们松开鼠标的时候就可以通过change回调获取到真实的进度值）,最后，记住mouseup销毁mousemove和mouseup事件，但是不要把原来的事件同时给销毁了

image

有更好的解决方式，欢迎给我留言