新增watch时间段数据，当时间段数据变化后会自动触发重新渲染；时间段支持只传递beginTime

README.md

@@ -600,6 +600,8 @@ export default {
 | startRatio | 高度的起始比例，即top=时间轴高度*startRatio | Number | — | 0.6 |
 | endRatio | 高度的结束比例，即bottom=时间轴高度*endRatio | Number | — | 0.9 |
 
+> 从v0.1.8+版本开始，时间段可以只传一个beginTime，绘制一根宽度为1px的线段
+
 ### 表1-5 windowList数组的对象元素的字段格式
 
 | 字段名 | 说明 | 类型 | 可选值 | 默认值 |

package/package.json

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

package/src/index.vue

@@ -235,6 +235,12 @@ export default {
  return this.currentZoomIndex === 10;
  },
  },
+ watch: {
+ timeSegments: {
+ deep: true,
+ handler: 'reRender'
+ }
+ },
  mounted() {
  this.setInitData()
  this.init()
@@ -466,17 +472,17 @@ export default {
  const PX_PER_MS = this.width / this.totalMS // px/ms，每毫秒占的像素
  this.timeSegments.forEach((item) => {
  if (
- item.beginTime <= this.startTimestamp + this.totalMS &&
- item.endTime >= this.startTimestamp
+ item.beginTime <= this.startTimestamp + this.totalMS
  ) {
+ let hasEndTime = item.endTime >= this.startTimestamp
  this.ctx.beginPath()
  let x = (item.beginTime - this.startTimestamp) * PX_PER_MS
  let w
  if (x < 0) {
  x = 0
- w = (item.endTime - this.startTimestamp) * PX_PER_MS
+ w = hasEndTime ? (item.endTime - this.startTimestamp) * PX_PER_MS : 1
  } else {
- w = (item.endTime - item.beginTime) * PX_PER_MS
+ w = hasEndTime ? (item.endTime - item.beginTime) * PX_PER_MS : 1
  }
  let heightStartRatio = item.startRatio === undefined ? 0.6 : item.startRatio
  let heightEndRatio = item.endRatio === undefined ? 0.9 : item.endRatio