Vue 2.0音乐/视频播放进度条组件实战与代码解析

在vue2.0中实现音乐或视频播放进度条组件，这个组件主要功能包括动态更新播放进度、支持滑动控制和点击播放控制。下面是关键知识点的详细解析： 1. **需求分析**： - 进度条设计需要与音乐/视频的播放状态同步，即当歌曲播放时，黑色总进度条长度随播放进度增加，播放完毕时两者长度相等。 - 滑动控制：用户通过滑动按钮可以实时调整播放进度，橙色进度条长度随之变化，滑动停止后保持在最后位置，歌曲从该点继续播放。 - 点击控制：点击进度条的不同位置，橙色进度条长度会显示从起点到点击点的长度，并从点击点开始播放。 2. **技术路线**： - 时间展示：左侧的时间通过监听`audio`的`timeupdate`事件获取实时播放时间，右侧时间则通过接口获取歌曲的总时长。 - 进度计算：进度条子组件的长度基于父组件传递的`percent`值，该值是当前播放进度与总进度的比例。 - 通信机制：当进度条滑动或点击后，子组件通过`this.$emit()`向父组件发送`percent`值，父组件接收到此事件并调用相应函数更新音乐播放进度。 3. **组件实现**： - HTML部分： - 使用`ref`属性绑定组件，如`progressBar`和`progressBtn`，以便于JavaScript操作。 - 使用CSS类名控制样式，如`.progress`表示橙色进度条，`.progress-btn`表示滑动按钮。 - JavaScript部分： - 数据属性定义：如`btnWidth`存储按钮的初始宽度，`touchInfo`存储滑动相关的信息。 - 方法定义： - `progressClick`：处理点击事件，更新进度条长度并播放。 - `progressTouchStart`、`progressTouchMove`、`progressTouchEnd`：分别处理滑动开始、移动和结束时的事件，更新触摸信息并根据滑动距离计算新的播放进度。 - 在组件初始化时，通过`data`函数返回这些属性和方法。 4. **关键代码**： - 指令`@touchstart.prevent`、`@touchmove.prevent`和`@touchend`用于阻止默认的触摸行为，确保只处理自定义的滑动和点击事件。 - `this.$emit('customEvent', percent)`：在事件结束时向父组件发送自定义事件，传递当前的percent值。 总结，这个vue2.0音乐/视频播放进度条组件通过结合数据绑定、事件处理和组件间的通信，实现了播放进度的实时反馈、滑动控制以及点击播放功能，为用户提供直观的交互体验。