vue 音乐进度条拖拽

最新推荐文章于 2025-05-07 18:14:07 发布

whale·fall

最新推荐文章于 2025-05-07 18:14:07 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/stm870581942/article/details/112853526

本文介绍了作者在实现Vue音乐进度条拖拽功能时遇到的挑战。最初通过mousedown, mousemove, mouseup事件处理未能达到预期效果，当鼠标移出区域时进度条停止。后来改用input的range类型，通过监听播放时长更新进度条，并在onchange事件中调整播放时间。同时，为解决Chrome浏览器进度颜色问题，利用:style进行样式定制。" 132784741,7144079,Matlab编程：创建与调用自定义子函数,"['Matlab', '开发语言', '编程技巧']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

音乐进度条拖拽这个点卡了我2天，遇到了很多问题，一开始我的思路是自定义设计一个进度条，进度条按时间推移和点击进度条跳转音乐播放都能实现了，但最后滑动进度条卡住了，一开始尝试mousedown，mousemove，mouseup实现，但鼠标移出区域后进度条就会停止，达不到我想要的效果，我能力有限，不知道要怎么实现。

之后想到input有个range类型，就试了试，发现简单很多。

<input
  type="range"
  class="musicBar"
  ref="musicBar"
  v-model="musicBar"
  min="0"
  max="600"
  @change="changeBar()"
  @input="inputBar()"
  :style="{
   
   
    background:
      '-webkit-linear-gradient(#ff4e4e, #ff4e4e) 0% 0% / ' +
      (musicBar * 100) / 600 +
      '% 100% no-repeat',
  }"

监听播放时长，增加musicBar的值，进度条会随时间变化而变化，
onchange获得musicBar的值改变播放时长，将时长赋值给audio

//this.$store.state.mDuration为歌曲实时播放时长
//this.$store.state.reMusicDuration为歌曲总时长
data() {
   
   
  return {
   
   
    isPlayMusic: "",
    progressLong: "",
    volume: 100, //音量
    musicBar: 0, //进度条的value值
    isBar: true, //
  };
},
methods: {
   
   
	//滑动进度条
	inputBar(