vue+element制作音乐播放器播放进度条bug(鼠标拖拽slider滑块滑动到指定位置无效)

最开始bug还没解决时的效果图

bug解决后的效果图

项目场景：

想自己做一个基于vue仿网易云音乐的音乐网站，在制作播放器的时候用到了element ui里面的slider组件，制作完成后发现使用change的方法无法达到我需要的效果，上网查询发现没有好的方案，后面自己琢磨后发现解决方案

问题描述：

在进度条制作完成以后，发现可以通过点击定位到进度条相应的位置，但是在用鼠标拖拽进度条时有时候会失败（在拖拽时间超过1s时），达不到那种可以通过点击跳转到指定区域的功能，并且在鼠标滑动时，进度条依旧在变化。
template：

<audio :src="musicUrl" autoplay class="playMusicAudio" ref="audio" @canplay="getDuration" @timeupdate="durationUpdate"></audio>
<!-- 播放进度条 -->
        <span style="position: absolute;right: 72%;bottom: 14%;">{
   {
   this.musicDuration | timeFormat}}</span>
        <div id="playSlider">
            <el-slider v-model="musicDuration" :max="musicAllDuration" :show-tooltip="false" @change="changeMusicDuration"></el-slider>
        </div>
        <span style="position: absolute;left: 72%;bottom: 14%;">{
   {
   this.musicAllDuration | timeFormat}}</span>

data：

data() {
   
            return {
   
                // 判断当前是否在播放
                isPlaying: false,
                //判断播放顺序模式
                playOrd: 0,
                //歌曲总时长
                musicAllDuration: 0,
                // 歌曲当前时长
                musicDuration: 0,
            }
        },

methods：

			//获得播放歌曲总时长
            getDuration() {
   
                this.musicAllDuration = this.$refs.audio.duration
            },
            //更新当前时长
            durationUpdate() {
   
                this.musicDuration = this.$refs.audio.currentTime
            },
            //鼠标拖拽松开时
            changeMusicDuration() {
   
                if (this.musicAllDuration === 0) return
                this.$refs.audio.currentTime = this.musicDuration
            },

---

原因分析：

由于我设置当前时长是随着audio的更新而赋值达到实时更新的，而element的slider的change方法是在鼠标松开后才会触发，这就会导致在拉动的时候鼠标还没松开达到赋值给当前时长前，audio的timeupdata方法就再次触发了，这时再松开鼠标，change方法里面赋予的值就不是鼠标拖拽到的指定进度，而是audio的timeupdate方法赋值给当前时长的进度值。

---

解决方案：

在鼠标按下时把audio的timeupdate方法禁止掉，在松开的时候再触发，但是没有方法能在一个事件里面禁止掉另一个事件，所以添加一个判断是否在拖拽状态的属性，来达到鼠标按下时timeupdate禁止掉的功能。
附上代码：
template：

<audio :src="musicUrl" autoplay class="playMusicAudio" ref="audio" @canplay="getDuration" @timeupdate="durationUpdate"></audio>
<!-- 播放进度条 -->
        <span style="position: absolute;right: 72%;bottom: 14%;">{
   {
   this.musicDuration | timeFormat}}</span>
        <div id="playSlider">
            <el-slider v-model=