vue-music（13）进度条的实现

最新推荐文章于 2024-08-09 07:30:37 发布

望天一方

最新推荐文章于 2024-08-09 07:30:37 发布

阅读量1.3k

点赞数

分类专栏： vue-music 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42372054/article/details/82466573

版权

本文介绍了在Vue项目中实现音乐播放器进度条功能的详细步骤，包括通过派发事件更新数据以及使用getBoundingClientRect获取元素相对位置来实现点击进度条跳转。同时，还探讨了圆形进度条的SVG实现方法。

摘要由CSDN通过智能技术生成

这里写图片描述

<template>
  <!-- 进度条 总体长度 -->
  <div  class="progress-bar" ref="progressBar" @click="progressClick">
    <div class="bar-inner">
      <!-- 进度条 已播放长度 -->
      <div class="progress" ref="progress"></div>
      <!-- 进度条 按钮 -->
      <div class="progress-btn-wrapper" ref="progressBtn"
        @touchstart.prevent="progressTouchStart"
        @touchmove.prevent="progressTouchMove"
        @touchend.prevent="progressTouchEnd"
      >
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>
</template>