新增时间轴的点击事件

README.md

@@ -524,6 +524,7 @@ export default {
 | windowList | 播放窗口列表，播放窗口数量大于1的话可以配置此项，会显示和窗口对应数量的时间轴，只有一个窗口的话请直接使用基本时间轴，对象数组类型，对象字段见表1-5 | Array | — | [] |
 | baseTimeLineHeight | 当显示windowList时的基础时间轴高度 | Number | — | 50 |
 | initSelectWindowTimeLineIndex | 初始选中的窗口时间轴索引 | Number | — | -1 |
+| maxClickDistance（v0.1.2+） | 鼠标按下和松开的距离小于该值认为是点击事件 | Number | — | 3 |
 
 ### 表1-1 timeRange对象的字段格式
 
@@ -576,6 +577,7 @@ export default {
 | click_timeSegments | 点击到了基础时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型） |
 | click_window_timeSegments | 点击到了窗口时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、index（时间轴索引）、item（时间轴数据） |
 | change_window_time_line | 点击窗口时间轴进行切换选中时触发 | index（时间轴索引）、item（时间轴数据） |
+| click_timeline（v0.1.2+） | 时间轴的点击事件 | time（点击位置对应的时间戳）、 date（点击位置对应的日期时间字符串）、 x（点击位置相对时间轴左侧的距离） |
 
 ## 方法
 

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@wanglin1994/video-timeline",
- "version": "0.1.1",
+ "version": "0.1.2",
  "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"></canvas>
+ <canvas class="canvas" ref="canvas" @mousewheel.stop.prevent="onMouseweel" @click="onCanvasClick"></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"
@@ -170,7 +170,12 @@ export default {
  isMobile: {
  type: Boolean,
  default: false
- }
+ },
+ // 鼠标按下和松开的距离小于该值认为是点击事件
+ maxClickDistance: {
+ type: Number,
+ default: 3
+ },
  },
  data() {
  return {
@@ -183,6 +188,7 @@ export default {
  mousedown: false,
  mousedownX: 0,
  mousedownY: 0,
+ mousedownXUseByDiscriminateClick: 0,
  mousedownCacheStartTimestamp: 0,
  showWindowList: false,
  windowListInner: [],
@@ -498,6 +504,7 @@ export default {
  // 按下事件
  onPointerdown(e) {
  let pos = this.getClientOffset(e)
+ this.mousedownXUseByDiscriminateClick = pos[0]
  this.mousedownX = pos[0]
  this.mousedownY = pos[1]
  this.mousedown = true
@@ -887,6 +894,19 @@ export default {
  item.init()
  })
  } catch (error) { }
+ },
+
+ // 时间轴点击事件
+ onCanvasClick(e) {
+ let x = this.getClientOffset(e)[0]
+ if (Math.abs(this.mousedownXUseByDiscriminateClick - x) >= this.maxClickDistance) {
+ return
+ }
+ this.mousedownXUseByDiscriminateClick = 0
+ 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')
+ this.$emit('click_timeline', time, date, x)
  }
  }
 }