基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下
需求分析：
①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。
②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。
③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。
大概思路：
①：左边的时间可以通过audio播放时派发的timeupdate事件获取，右边的时间为接口获取的当前歌曲的总时间。
②：进度条子组件的长度通过父组件传入一个percent值计算，percent值为播放进度与总进度的比值。
③：进度条的滑动及点击结束后，需要向父组件传递一个percent值，使用this.$emit()像父组件派发事件，父组件中设置事件响应函数，接收percent参数值，用于改变audio中当前播放的音乐进度。
详细实现，关键代码已经注释：
先上组件源码：
<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)
}
},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)
}
}
}
}
<style lang="stylus" rel="stylesheet/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.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
此为progeRSS-bar.vue组件源码，组件所需要父组件传入的值只有一个“percent”，为父组件中audio当前播放时间与总时间的比值，用于计算此组件中橙色进度条的长度。
组件的使用：
首先导入并注册组件（在此不做解释），随后使用此组件，dom：
