（补）vue3音乐播放器进度条的代码

说明

之前发的文章给忘了，看了评论很顿时发现自己是个标题党，这里贴一下vue3的代码,实现思想还是没变。

相关代码

<template>
  <div class="progress-bar">
    <input
      type="range"
      ref="progress"
      :class="{ active: isTouch }"
      min="0"
      :max="duration"
      step="0.05"
      @touchstart="touchStart"
      @touchend="touchEnd"
    />
    <div class="progerss-time">
      <span class="left">{{ parseTime(currentTime) }}</span>
      <span class="right">{{ parseTime(duration) }}</span>
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { SET_PLAY_TIME } from "store/mutations-types";
import { computed, onMounted, ref, watchEffect } from "vue";

import { parseTime } from "common/display";
export default {
  name: "PlayerProgress",
  setup() {
    const $store = useStore();

    const duration = computed(() => $store.state.duration);

    const currentTime = computed(() => $store.state.currentTime);

    // 改变样式
    let isTouch = ref(false);
    const progress = ref(null);
    let unwatch = null;

    const progressWatcher = () => {
      return watchEffect(() => {
        progress.value.value = currentTime.value;
      });
    };

    const touchStart = e => {
      unwatch();
      isTouch.value = true;
    };

    const touchEnd = e => {
      // 跳转至对应时间
      $store.commit(SET_PLAY_TIME, Number.parseFloat(e.target.value));
      unwatch = progressWatcher();
      isTouch.value = false;
    };
    onMounted(() => {
      unwatch = progressWatcher();
    });
    return {
      duration,
      currentTime,
      isTouch,
      progress,
      parseTime,
      touchStart,
      touchEnd
    };
  }
};
</script>
  ...//滚动横条相关样式
</style>

总结

反正代码更整齐了就对了,现在可以用这个标题了。