基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下
需求分析：
①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。
②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。
③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。
大概思路：
①：左边的时间可以通过audio播放时派发的timeupdate事件获取，右边的时间为接口获取的当前歌曲的总时间。
②：进度条子组件的长度通过父组件传入一个percent值计算，percent值为播放进度与总进度的比值。
③：进度条的滑动及点击结束后，需要向父组件传递一个percent值，使用this.$emit()像父组件派发事件，父组件中设置事件响应函数，接收percent参数值，用于改变audio中当前播放的音乐进度。
详细实现，关键代码已经注释：
先上组件源码：
<template> <div ref="progressBar" @click="progressClick"> <div> <div ref="progress"></div> <divref="progressBtn" @touchstart.prevent = "progressTouchStart" @touchmove.prevent = "progressTouchMove" @touchend = "progressTouchEnd" > <div></div> </div> </div> </div> </template> <script type="text/ecmascript-6"> // 进度条按钮宽度,由于style中没有设置width,因此只能用clientWidth获取 export default { data() { return { btnWidth: { type: Number, default: 0 }, touchInfo: { initiated: false } } }, props: { percent: { type: Number, default: 0 } }, mounted() { this.btnWidth = document.getElementsByClassName('progress-btn')[0].clientWidth }, methods: { // 点击按钮 progressTouchStart(e) { // 记录touch事件已经初始化 this.touchInfo.initiated = true // 点击位置 this.touchInfo.startX = e.touches[0].pageX // 点击时进度条长度 this.touchInfo.left = this.$refs.progress.clientWidth }, // 开始移动 progressTouchMove(e) { if (!this.touchInfo.initiated) { return } // 计算移动距离 const moveX = e.touches[0].pageX - this.touchInfo.startX // 设置偏移值 const offsetWidth = Math.min(Math.max(0, this.touchInfo.left + moveX), this.$refs.progressBar.clientWidth - this.btnWidth) this._setOffset(offsetWidth) }, // 移动结束 progressTouchEnd(e) { this.touchInfo.initiated = false // 向父组件派发事件,传递当前百分比值 this._triggerPercent() }, // 进度条点击事件 progressClick(e) { console.log('clikc') // 设置进度条及按钮偏移 this._setOffset(e.offsetX) // 通知父组件播放进度变化 this._triggerPercent() }, _triggerPercent() { const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth const percent = Math.min(1, this.$refs.progress.clientWidth / barWidth) this.$emit('percentChange', percent) }, // 设置偏移 _setOffset(offsetWidth) { // 设置进度长度随着百分比变化 this.$refs.progress.style.width = `${offsetWidth}px` // 设置按钮随着百分比偏移 this.$refs.progressBtn.style.transform = `translate3d(${offsetWidth}px, 0, 0)` } }, watch: { // 监听歌曲播放百分比变化 percent(newPercent, oldPercent) { if (newPercent > 0 && !this.touchInfo.initiated) { // 进度条总长度 const barWidth = this.$refs.progressBar.clientWidth - this.btnWidth const offsetWidth = barWidth * newPercent // 设置进度条及按钮偏移 this._setOffset(offsetWidth) } } } } </script> <style lang="stylus"> @import "~common/stylus/variable.styl" .progress-bar height 0.5rem .bar-inner position relative top 0.2rem height 0.08rem background rgba(0, 0, 0, 0.3) .progress position absolute height 100% background $color-theme .progress-btn-wrapper position absolute left -0.25rem top -0.25rem width 0.5rem height 0.5rem .progress-btn position relative top 0.12rem left 0.12rem box-sizing border-box width 0.32rem height 0.32rem border 0.06rem solid $color-text border-radius 50% background $color-theme </style>
此为progerss-bar.vue组件源码，组件所需要父组件传入的值只有一个“percent”，为父组件中audio当前播放时间与总时间的比值，用于计算此组件中橙色进度条的长度。
组件的使用：
首先导入并注册组件（在此不做解释），随后使用此组件，dom：
<div> <span>{{formatTime(currentTime)}}</span> <div> <progress-bar :percent="percent" @percentChange="setProgress"></progress-bar> </div> <span>{{formatTime(currentSong.duration)}}</span> </div>