手写进度条

尝试用<progress>直接实现回放进度条效果，记录部分代码

1. 实现进度条样式

<progress id="progress" :max="progressMax" :value="progressValue" ></progress>

主要样式

progress:hover {
  cursor: pointer;
}

progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 35rem;
  height: 5px;
}

progress[value]::progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.7);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

2. 在onMounted添加进度条监听点击事件

  const progress = document.getElementById('progress') as HTMLElement
  progress.addEventListener('click', handleProgressClick)

3.点击事件处理，进度值、进度条最大数值可以与实际业务代码绑定，我目前使用的是进度条最大数值跟要播放的帧数相关联，进度值跟当前帧数相关联，具体代码不放了。

// 进度条最大数值
const progressMax = ref(100)

// 进度值
const progressValue = ref(0)

// 处理进度条点击事件
const handleProgressClick = (event: MouseEvent) => {
  // 获取progress元素
  const progress = event.currentTarget as HTMLElement

  // 获取进度条的宽度
  const width = progress.offsetWidth

  // 获取点击点相对于progress元素左侧的偏移量
  const offsetX = event.pageX - progress.offsetLeft

  // 计算点击点在progress上的value值
  const value = Math.round((offsetX / width) * progressMax.value)

  // 更新进度值
  progressValue.value = value
}

4.改变进度值

const timer = setInterval(() => {
    if (progressValue.value < progressMax.value) {
      progressValue.value += 1
    } else {
      // 清除定时器或者 progressValue.value =0
      clearInterval(timer)
    }
  }, 100）