时间段点击事件增加返回点击位置所在的时间

wanglin2 · Mar 9, 2023 · da3d3bb · da3d3bb
1 parent 425f926
commit da3d3bb
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -711,7 +711,7 @@ formatTime(time) {
 | dragTimeChange | 拖动时间条结束后的事件 | currentTime（当前时间，时间戳格式） |
 | mousedown | 鼠标按下事件 | e（事件对象） |
 | mouseup | 鼠标松开事件 | e（事件对象） |
-| click_timeSegments | 点击到了基础时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型） |
+| click_timeSegments | 点击到了基础时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、time（v0.1.10+，点击位置对应的时间戳）、 date（v0.1.10+，点击位置对应的日期时间字符串）、 x（v0.1.10+，点击位置相对时间轴左侧的距离） |
 | click_window_timeSegments | 点击到了窗口时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、index（时间轴索引）、item（时间轴数据） |
 | change_window_time_line | 点击窗口时间轴进行切换选中时触发 | index（时间轴索引）、item（时间轴数据） |
 | click_timeline（v0.1.2+） | 时间轴的点击事件 | time（点击位置对应的时间戳）、 date（点击位置对应的日期时间字符串）、 x（点击位置相对时间轴左侧的距离） |

diff --git a/demo/src/components/Segment.vue b/demo/src/components/Segment.vue
@@ -58,8 +58,8 @@ export default {
  timeChange2(t) {
  this.time2 = t
  },
- click_timeSegments(arr) {
- console.log('onClickTimeSegments', arr)
+ click_timeSegments(arr, ...args) {
+ console.log('onClickTimeSegments', arr, args)
  alert('点击了：' + arr[0].name)
  },
  onClickTimeLine(...args) {

diff --git a/dist/css/app.afa0c831.css → dist/css/app.22df10af.css b/dist/css/app.afa0c831.css → dist/css/app.22df10af.css
diff --git a/dist/js/app.0c429e75.js b/dist/js/app.0c429e75.js
diff --git a/dist/js/app.0c429e75.js.map b/dist/js/app.0c429e75.js.map
diff --git a/dist/js/app.8c2aa534.js b/dist/js/app.8c2aa534.js
diff --git a/dist/js/app.8c2aa534.js.map b/dist/js/app.8c2aa534.js.map
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="dist/favicon.ico"><title>demo</title><script defer="defer" src="dist/js/chunk-vendors.590eac69.js"></script><script defer="defer" src="dist/js/app.8c2aa534.js"></script><link href="dist/css/chunk-vendors.4e2d36cb.css" rel="stylesheet"><link href="dist/css/app.afa0c831.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="dist/favicon.ico"><title>demo</title><script defer="defer" src="dist/js/chunk-vendors.590eac69.js"></script><script defer="defer" src="dist/js/app.0c429e75.js"></script><link href="dist/css/chunk-vendors.4e2d36cb.css" rel="stylesheet"><link href="dist/css/app.22df10af.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@wanglin1994/video-timeline",
- "version": "0.1.9",
+ "version": "0.1.10",
  "description": "一个基于Vue2的时间轴组件，一般用于监控视频的回放。",
  "main": "index.js",
  "scripts": {},

diff --git a/package/src/index.vue b/package/src/index.vue
@@ -791,11 +791,14 @@ export default {
  * @Desc: 点击事件
  */
  onClick(x, y) {
+ 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')
  let timeSegments = this.getClickTimeSegments(x, y)
  if (timeSegments && timeSegments.length > 0) {
- this.$emit('click_timeSegments', timeSegments)
+ this.$emit('click_timeSegments', timeSegments, time, date, x)
  } else {
- this.onCanvasClick(x)
+ this.onCanvasClick(time, date, x)
  }
  },
 
@@ -1008,11 +1011,8 @@ export default {
  },
 
  // 时间轴点击事件
- 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')
- this.$emit('click_timeline', time, date, x)
+ onCanvasClick(...args) {
+ this.$emit('click_timeline', ...args)
  }
  }
 }