vue用element-ui的滑块做音乐播放器进度条时拖动无法改变进度bug

做仿网易云音乐的时候要做一个音乐播放器就用了element-ui的slider滑块，然后发现滑动松开鼠标无法改变进度条，但是直接按可以改变
解决方法参考
https://blog.csdn.net/hhhhhhhssss/article/details/110932934
原因分析：

由于我设置当前时长是随着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="musicDuration" :max="musicAllDuration" :show-tooltip="false" @change="changeMusicDuration" @mousedown.native="isChange = true" @mouseup.native="isChange = false"></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,
                //判断是否被拖动
                isChange: false
            }
        },
｝

methods：

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