Vue音乐播放器slider进度条拖拽又弹回去

结构

<div class="progress_area" @mousedown="isDraging = true" @mouseup="isDraging = false">
                  <span>{
    
    {
    
    currentTime}}</span>
                  <el-slider v-model="currentPer" @change="sliderChange"></el-slider>
                  <span>{
    
    {
    
    duration}}</span>
</div>


<audio id = "audio" ref='audio' muted @canplay="getDuration" @timeupdate="updateTime">
                <source :src="playingSong" type="audio/wav">
                您的浏览器不支持 audio 元素。
</audio>

方法

/* 获取已播放时长 */
      updateTime (e) {
    
    
          if (!this.isDraging) {
    
    
              this.currentTime = format(e.target.currentTime)
              this.currentPer = e.target.currentTime / this.$refs.audio.duration * 100
          }
      }

/* 拖拽 */
      sliderChange () {
    
    
          this.$refs.audio.currentTime = this.$refs.audio.duration * this.currentPer / 100
          this.$refs.audio.play()
      }

关键在于@mousedown=“isDraging = true” @mouseup=“isDraging = false”，在slider进度条拖拽的时候拖动的时候不允许改变slider的值，就不会使得slider弹回去了。
需要注意的是这两个事件不能加在slider标签里面，否则会没有效果。