3-vue播放进度条

template

  <div class="progress-bar"  ref="progressBar" @click="progressClick">
        <div class="progress-line" ref="progressLine">
          <div class="progress-dot"></div>
        </div>
      </div>

SCSS

 .progress-bar{
        margin: 0 10px;
        height: 10px;
        width: 100%;
        background: #fff;
        .progress-line{
          width: 0;
          height: 100%;
          background: #ccc;
          position: relative;
          .progress-dot{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

method

 //进度条点击事件
    progressClick(e){
      //1.获得进度条背景距离屏幕左边的位置
      let normalLeft = this.$refs.progressBar.offsetLeft
      //2.获得鼠标点击距离屏幕左边的位置
      let eventLeft = e.pageX
      //3.获得点击位置距离进度条背景左边的位置
      let clickLeft = eventLeft - normalLeft
      //4.获得进度条背景的宽度
      let progressWidth = this.$refs.progressBar.offsetWidth
      //5.计算比例
      let value = clickLeft / progressWidth
      //6.设置滚动条的宽度
      this.$refs.progressLine.style.width=value * 100 + "%"
      //7.设置当前播放时间 this.totalTime 是播放内容的时间 自己设置
      let currentTime = this.totalTime * value
      //8.修改正在播放的时间变量(方法自己设置)
      this.setCurrentTime(currentTime)
    }