The progress bar of the Vue music player slider drags and bounces back

structure

<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>

method

/* 获取已播放时长 */
      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()
      }

The key is that @mousedown="isDraging = true" @mouseup="isDraging = false", it is not allowed to change the value of the slider when the slider progress bar is dragged, so that the slider will not bounce back.
It should be noted that these two events cannot be added to the slider tag, otherwise they will have no effect.