videoProgress.vue
<template>
<div
ref="progressWrapper"
class="video-progress"
@click="onTrackClick"
@mousemove="mouseMove">
<div class="video-progress-track" :style="{ 'width': progress + '%'}"></div>
<div class="video-progress-point" ref="slider" :style="{ 'left': progress + '%'}" @mousedown="mouseDown"></div>
</div>
</template>
<script>
export default {
props: {
progress: {
type: Number,
default: 0
}
},
data() {
return {
isDrag: false,
distanceX: 0,
videoProgress: 0
}
},
watch: {
isDrag(val) {
this.$emit('getDragStatus', val)
},
progress(val) {
if (this.$refs.progressWrapper) {
this.videoProgress = (this.progress * (this.$refs.progressWrapper.offsetWidth * this.zoom)) / 100
}
}
},
methods: {
onTrackClick(event) {
this.isDrag = false
const sliderElement = this.$refs.slider
if (event.target === sliderElement) return
this.calculateDiatance(event.offsetX)
},
mouseDown(event) {
if (this.progress === 100) return
this.isDrag = true
this.distanceX = event.pageX - this.videoProgress
document.addEventListener('mouseup', () => {
this.isDrag = false
})
},
mouseMove(event) {
if (this.isDrag) {
const offsetX = event.pageX - this.distanceX
this.calculateDiatance(offsetX)
}
},
calculateDiatance(pageX) {
const parentWidth = this.$refs.progressWrapper.offsetWidth
const sliderWidth = this.$refs.slider.offsetWidth
if (pageX > parentWidth - sliderWidth) {