区分点击时间轴事件、拖拽事件、点击时间段事件

demo/src/components/Base.vue

@@ -29,7 +29,8 @@ export default {
  label: item,
  value: index
  }
- })
+ }),
+ timer: null
  }
  },
  computed: {
@@ -40,11 +41,14 @@ export default {
  },
  mounted() {
  // 基础用法
- setInterval(() => {
+ this.timer = setInterval(() => {
  this.time += 1000
  this.$refs.Timeline.setTime(this.time)
  }, 1000)
  },
+ beforeDestroy () {
+ clearTimeout(this.timer) 
+ },
  methods: {
  // 基础用法
  timeChange(t) {

demo/src/components/Custom.vue

@@ -37,6 +37,7 @@ export default {
  name: '窗口6'
  }
  ],
+ timer: null
  }
  },
  computed: {
@@ -47,7 +48,7 @@ export default {
  },
  mounted() {
  // 显示自定义元素
- setInterval(() => {
+ this.timer = setInterval(() => {
  this.time4 += 1000
  this.$refs.Timeline4.setTime(this.time4)
  }, 1000)
@@ -73,6 +74,9 @@ export default {
  }
  }, 2)
  },
+ beforeDestroy () {
+ clearTimeout(this.timer) 
+ },
  methods: {
  // 显示自定义元素
  timeChange4(t) {

demo/src/components/MultiSegment.vue

@@ -83,6 +83,7 @@ export default {
  name: '窗口6'
  }
  ],
+ timer: null,
  }
  },
  computed: {
@@ -93,11 +94,14 @@ export default {
  },
  mounted() {
  // 多个时间轴
- setInterval(() => {
+ this.timer = setInterval(() => {
  this.time3 += 1000
  this.$refs.Timeline3.setTime(this.time3)
  }, 1000)
  },
+ beforeDestroy () {
+ clearTimeout(this.timer) 
+ },
  methods: {
  // 多个时间轴
  timeChange3(t) {

demo/src/components/Segment.vue

@@ -3,7 +3,7 @@
  <div class="timeShow">当前时间：{{ showTime2 }}</div>
  <div class="timeLine">
  <TimeLine ref="Timeline2" :initTime="time2" @timeChange="timeChange2" :timeSegments="timeSegments"
- @click_timeSegments="click_timeSegments"></TimeLine>
+ @click_timeSegments="click_timeSegments" @click_timeline="onClickTimeLine" @dragTimeChange="onDragTimeChange"></TimeLine>
  </div>
  </div>
 </template>
@@ -33,7 +33,8 @@ export default {
  startRatio: 0.65,
  endRatio: 0.9
  }
- ]
+ ],
+ timer: null
  }
  },
  computed: {
@@ -44,18 +45,28 @@ export default {
  },
  mounted() {
  // 显示时间段
- setInterval(() => {
+ this.timer = setInterval(() => {
  this.time2 += 1000
  this.$refs.Timeline2.setTime(this.time2)
  }, 1000)
  },
+ beforeDestroy () {
+ clearTimeout(this.timer) 
+ },
  methods: {
  // 显示时间段
  timeChange2(t) {
  this.time2 = t
  },
  click_timeSegments(arr) {
+ console.log('onClickTimeSegments', arr)
  alert('点击了：' + arr[0].name)
+ },
+ onClickTimeLine(...args) {
+ console.log('onClickTimeLine', args)
+ },
+ onDragTimeChange(...args) {
+ console.log('onDragTimeChange', args)
  }
  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@wanglin1994/video-timeline",
- "version": "0.1.2",
+ "version": "0.1.3",
  "description": "一个基于Vue2的时间轴组件，一般用于监控视频的回放。",
  "main": "index.js",
  "scripts": {},

package/src/index.vue

@@ -3,7 +3,7 @@
  backgroundColor: backgroundColor,
  }" @touchstart="onTouchstart" @touchmove="onTouchmove" @mousedown="onMousedown" @mouseout="onMouseout"
  @mousemove="onMousemove" @mouseleave="onMouseleave">
- <canvas class="canvas" ref="canvas" @mousewheel.stop.prevent="onMouseweel" @click="onCanvasClick"></canvas>
+ <canvas class="canvas" ref="canvas" @mousewheel.stop.prevent="onMouseweel"></canvas>
  <div class="windowList" ref="windowList" v-if="showWindowList && windowList && windowList.length > 1"
  @scroll="onWindowListScroll">
  <WindowListItem v-for="(item, index) in windowListInner" ref="WindowListItem" :key="index" :index="index"
@@ -188,7 +188,6 @@ export default {
  mousedown: false,
  mousedownX: 0,
  mousedownY: 0,
- mousedownXUseByDiscriminateClick: 0,
  mousedownCacheStartTimestamp: 0,
  showWindowList: false,
  windowListInner: [],
@@ -504,7 +503,6 @@ export default {
  // 按下事件
  onPointerdown(e) {
  let pos = this.getClientOffset(e)
- this.mousedownXUseByDiscriminateClick = pos[0]
  this.mousedownX = pos[0]
  this.mousedownY = pos[1]
  this.mousedown = true
@@ -537,19 +535,24 @@ export default {
  onPointerup(e) {
  // 触发click事件
  let pos = this.getClientOffset(e)
+ const reset = () => {
+ this.mousedown = false
+ this.mousedownX = 0
+ this.mousedownY = 0
+ this.mousedownCacheStartTimestamp = 0
+ }
  if (
- Math.abs(pos[0] - this.mousedownX) <= 2 &&
- Math.abs(pos[1] - this.mousedownY) <= 2
+ Math.abs(pos[0] - this.mousedownX) <= this.maxClickDistance &&
+ Math.abs(pos[1] - this.mousedownY) <= this.maxClickDistance
  ) {
  this.onClick(...pos)
+ reset()
+ return
  }
  if (this.mousedown && this.enableDrag) {
  this.$emit('dragTimeChange', this.currentTime)
  }
- this.mousedown = false
- this.mousedownX = 0
- this.mousedownY = 0
- this.mousedownCacheStartTimestamp = 0
+ reset()
  this.$emit('mouseup', e)
  },
 
@@ -692,6 +695,8 @@ export default {
  let timeSegments = this.getClickTimeSegments(x, y)
  if (timeSegments && timeSegments.length > 0) {
  this.$emit('click_timeSegments', timeSegments)
+ } else {
+ this.onCanvasClick(x)
  }
  },
 
@@ -897,12 +902,7 @@ export default {
  },
 
  // 时间轴点击事件
- onCanvasClick(e) {
- let x = this.getClientOffset(e)[0]
- if (Math.abs(this.mousedownXUseByDiscriminateClick - x) >= this.maxClickDistance) {
- return
- }
- this.mousedownXUseByDiscriminateClick = 0
+ onCanvasClick(x) {
  const PX_PER_MS = this.width / this.totalMS // px/ms
  let time = this.startTimestamp + x / PX_PER_MS
  let date = dayjs(time).format('YYYY-MM-DD HH:mm:ss')