本文是关于使用Vue3开发web音乐播放器的实践记录，主要探讨如何实现进度条显示和拖动定位功能。通过html的input range组件结合Vue的props进行数据交互，解决拖动进度条时数据冲突的问题。通过$watch监听和unwatch取消监听，实现了在拖动进度条时不接收video的currentTime，避免干扰。
一、简介
一些零基础小白学习vue3的开发记录，目标实现web端音乐播放器。github开发代码，欢迎一起交流学习。
二、相关准备
需求分析：
- 歌曲播放时，显示进度条，随着时间一起前进
- 拖动进度条，能够定位到歌曲对位位置播放
- 说到进度条，在html里面首先想到的是input组件，其中的range类型，通过vue的props传递属性可以很方便的实现想要的功能。
- 拖动进度条首先想到的vue的双向绑定，但这里有个问题就是：双向绑定数据后拖动改变时间，但是歌曲还在播放，穿过来的数据导致进度条向前。两者有明显冲突。
三、实现过程
滚动条的显示
获取相关数据
需要用到的
相关代码如下：
利用数据显示进度条
这里查阅相关文档修改进度条样式，相关style这里不显示了。然后对通过props接收到的值进行显示也没有问题。
相关代码如下：
拖动进度条定位功能的实现
这里首先考虑到分析过的问题2，决定再显示一个一样的input标签，绑定临时定义的变量进行单向控制。也就是从video传过来的值显示一个进度条，临时进度条拖动后双向绑定的值传回给video设置currentTime。
然后测试了之后经过分析还是发现不能通过双向绑定实现，这样数据流形成了闭环，拖动产生的Time和传过来currentTime会相互干扰。
分析过后，觉得只要没有控制的时候接收传过来的currentTime，但是控制的时候取消接收，这时候将拖动产生的Time传给video进行设置就行了。
在vue文档中查了一下，$watch这个实例方法监听的时候会返回一个unwatch取消监听函数，那么就很容易实现想要的功能了。
相关代码如下，其中上面绑定的v-model="currentTime"需要去掉：
扫一扫
1306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
