diff --git a/src/components/Footer.vue b/src/components/Footer.vue index bcec8ce..dea6de9 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -35,9 +35,11 @@ export default { }, methods: { move(e) { - this.mitt.emit(this.$store.state.currentVideoId, e.touches[0].pageX) + this.mitt.emit(this.$store.state.currentVideoId, {isMove: true, e: e.touches[0].pageX}) + this.$stopPropagation(e) }, end(e) { + this.mitt.emit(this.$store.state.currentVideoId, {isMove: false,}) }, tab(index) { this.currentTab = index diff --git a/src/components/Video.vue b/src/components/Video.vue index 7ce40dd..9bac274 100644 --- a/src/components/Video.vue +++ b/src/components/Video.vue @@ -84,7 +84,6 @@ export default { }, computed: { durationStyle() { - // return {left: this.$store.state.playDuration + 'px'} return {left: this.playDuration + 'px'} } }, @@ -92,10 +91,18 @@ export default { disabled: { immediate: true, handler(v) { - // console.log('disabled', this.currentVideoId, v) + console.log('disabled', this.currentVideoId, v) this.isPlaying = !v if (!v) { this.$store.commit('setCurrentVideoId', this.currentVideoId) + console.log(this.$refs) + if (this.$refs.video) { + this.$refs.video.play() + } + } else { + if (this.$refs.video) { + this.$refs.video.pause() + } } } } @@ -121,9 +128,9 @@ export default { this.width = document.body.clientWidth this.line = this.$refs.line this.point = this.$refs.point - this.mitt.on(this.currentVideoId, e => { - console.log('mitt-test', e) - this.playDuration = e + this.mitt.on(this.currentVideoId, v => { + this.isMove = v.isMove + this.playDuration = v.isMove ? v.e : this.playDuration }) }, methods: { @@ -186,20 +193,13 @@ export default { move(e) { this.isMove = true this.playDuration = e.touches[0].pageX - // this.$store.commit('setPlayDuration',e.touches[0].pageX) - // this.$setCss(this.line, 'width', e.touches[0].pageX + 'px') - // this.$setCss(this.point, 'left', e.touches[0].pageX + 'px') - this.stop(e) + this.$stopPropagation(e) }, end(e) { this.isMove = false - this.stop(e) - }, - stop(e) { - e.stopImmediatePropagation() - e.stopPropagation() - e.preventDefault() + this.$stopPropagation(e) }, + } } diff --git a/src/main.js b/src/main.js index d939928..da137d7 100644 --- a/src/main.js +++ b/src/main.js @@ -58,6 +58,11 @@ const store = Vuex.createStore({ const myMixin = { methods: { + $stopPropagation(e) { + e.stopImmediatePropagation() + e.stopPropagation() + e.preventDefault() + }, $getCss(curEle, attr) { let val = null, reg = null if ("getComputedStyle" in window) {