{"id":17176228,"url":"https://github.com/wanglin2/videotimeline","last_synced_at":"2025-04-11T01:03:31.563Z","repository":{"id":62028007,"uuid":"556506876","full_name":"wanglin2/VideoTimeLine","owner":"wanglin2","description":"一个简单的Vue2视频时间轴组件","archived":false,"fork":false,"pushed_at":"2023-03-09T01:22:08.000Z","size":3512,"stargazers_count":124,"open_issues_count":14,"forks_count":28,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T01:03:30.206Z","etag":null,"topics":["canvas","time-axis","timeline"],"latest_commit_sha":null,"homepage":"https://wanglin2.github.io/VideoTimeLine/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wanglin2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-24T01:31:46.000Z","updated_at":"2025-04-05T11:34:27.000Z","dependencies_parsed_at":"2024-11-13T15:50:45.435Z","dependency_job_id":null,"html_url":"https://github.com/wanglin2/VideoTimeLine","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":0.1428571428571429,"last_synced_commit":"da3d3bb4fc1f3415d3139a60164f1db2b5ec4722"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2FVideoTimeLine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2FVideoTimeLine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2FVideoTimeLine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2FVideoTimeLine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wanglin2","download_url":"https://codeload.github.com/wanglin2/VideoTimeLine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322597,"owners_count":21084336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","time-axis","timeline"],"created_at":"2024-10-14T23:59:36.504Z","updated_at":"2025-04-11T01:03:31.544Z","avatar_url":"https://github.com/wanglin2.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"一个基于Vue2的时间轴组件，一般用于监控视频的回放。\n\n# 文章\n\n[手摸手带你实现一个时间轴组件](https://juejin.cn/post/7157917487953084429)\n\n# 本地开发\n\n```bash\ngit clone https://github.com/wanglin2/VideoTimeLine.git\ncd package\nnpm i\nnpm link\ncd ..\ncd demo\nnpm i\nnpm link @wanglin1994/video-timeline\nnpm run serve\n```\n\n# 安装\n\n```bash\nnpm i @wanglin1994/video-timeline\n```\n\n\u003e 注意：源码未打包直接发布，有需要请自行配置打包文件。\n\n# 引入\n\n```js\nimport VideoTimeline from '@wanglin1994/video-timeline'\nVue.use(VideoTimeline)\n```\n\n# 基础用法\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"timeShow\"\u003e当前时间：{{showTime}}\u003c/div\u003e\n    \u003cdiv class=\"timeLine\"\u003e\n        \u003cTimeLine ref=\"Timeline\" @timeChange=\"timeChange\"\u003e\u003c/TimeLine\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"btns\"\u003e\n        \u003cel-button type=\"primary\" @click=\"reRender\"\u003e重新渲染\u003c/el-button\u003e\n        \u003cel-button type=\"primary\" @click=\"jump\"\u003e跳转到2021-01-01零点\u003c/el-button\u003e\n        \u003cel-select\n            v-model=\"zoom\"\n            placeholder=\"请选择\"\n            style=\"width: 100px;margin: 0 10px;\"\n            @change=\"zoomChange\"\n        \u003e\n            \u003cel-option\n                v-for=\"item in zoomList\"\n                :key=\"item.value\"\n                :label=\"item.label\"\n                :value=\"item.value\"\n            \u003e\n            \u003c/el-option\u003e\n        \u003c/el-select\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport dayjs from 'dayjs'\n\nexport default {\n  data () {\n    return {\n      // 基础用法\n      time: Date.now(),\n      zoom: 5,\n      zoomList: ['半小时', '1小时', '2小时', '6小时', '12小时', '1天', '3天', '15天', '30天'].map((item, index) =\u003e {\n        return {\n          label: item,\n          value: index\n        }\n      })\n    }\n  },\n  computed: {\n    // 基础用法\n    showTime () {\n      return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')\n    }\n  },\n  mounted () {\n    // 基础用法\n    setInterval(() =\u003e {\n      this.time += 1000\n      this.$refs.Timeline.setTime(this.time)\n    }, 1000)\n  },\n  methods: {\n    // 基础用法\n    timeChange (t) {\n      this.time = t\n    },\n    reRender () {\n      this.initZoomIndex = 8\n      this.$refs.Timeline.reRender()\n    },\n    jump () {\n      this.$refs.Timeline.setTime('2021-01-01 00:00:00')\n    },\n    zoomChange (value) {\n      this.$refs.Timeline.setZoom(value)\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"less\" scoped\u003e\n.container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    position: relative;\n    justify-content: center;\n    flex-direction: column;\n\n    .timeLine {\n        height: 50px;\n    }\n}\n\n.btns {\n  margin: 10px 0;\n  display: flex;\n  justify-content: center;\n}\n\n.timeShow {\n  margin: 10px 0;\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\u003c/style\u003e\n```\n\n# 显示时间段\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"timeShow\"\u003e当前时间：{{showTime2}}\u003c/div\u003e\n    \u003cdiv class=\"timeLine\"\u003e\n        \u003cTimeLine \n            ref=\"Timeline2\" \n            :initTime=\"time2\" \n            @timeChange=\"timeChange2\" \n            :timeSegments=\"timeSegments\" \n            @click_timeSegments=\"click_timeSegments\"\n        \u003e\u003c/TimeLine\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport dayjs from 'dayjs'\n\nexport default {\n  data () {\n    return {\n      // 显示时间段\n      time2: '2021-01-15 00:00:00',\n      timeSegments: [\n        {\n          name: '时间段1',\n          beginTime: new Date('2021-01-13 10:00:00').getTime(),\n          endTime: new Date('2021-01-14 23:00:00').getTime(),\n          color: '#FA3239',\n          startRatio: 0.65,\n          endRatio: 0.9\n        },\n        {\n          name: '时间段2',\n          beginTime: new Date('2021-01-15 02:00:00').getTime(),\n          endTime: new Date('2021-01-15 18:00:00').getTime(),\n          color: '#836ABB',\n          startRatio: 0.65,\n          endRatio: 0.9\n        }\n      ]\n    }\n  },\n  computed: {\n    // 显示时间段\n    showTime2 () {\n      return dayjs(this.time2).format('YYYY-MM-DD HH:mm:ss')\n    }\n  },\n  mounted () {\n    // 显示时间段\n    setInterval(() =\u003e {\n      this.time2 += 1000\n      this.$refs.Timeline2.setTime(this.time2)\n    }, 1000)\n  },\n  methods: {\n    // 显示时间段\n    timeChange2 (t) {\n      this.time2 = t\n    },\n    click_timeSegments (arr) {\n      alert('点击了：' + arr[0].name)\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"less\" scoped\u003e\n.container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    position: relative;\n    justify-content: center;\n    flex-direction: column;\n\n    .timeLine {\n        height: 50px;\n    }\n}\n\n.timeShow {\n  margin: 10px 0;\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\u003c/style\u003e\n```\n\n# 多个时间轴\n\n当超过一个播放窗口时可以显示多个时间轴。\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"timeShow\"\u003e当前时间：{{showTime3}}\u003c/div\u003e\n    \u003cdiv class=\"timeline3\"\u003e\n        \u003cTimeLine \n            ref=\"Timeline3\" \n            :initTime=\"time3\" \n            @timeChange=\"timeChange3\" \n            :timeSegments=\"timeSegments3\" \n            @click_timeSegments=\"click_timeSegments3\" \n            :windowList=\"windowList\" \n            @click_window_timeSegments=\"click_window_timeSegments\"\n        \u003e\u003c/TimeLine\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport dayjs from 'dayjs'\n\nexport default {\n  data () {\n    return {\n      // 多个时间轴\n      time3: '2021-01-15 00:00:00',\n      timeSegments3: [\n        {\n          name: '时间段1',\n          beginTime: new Date('2021-01-13 10:00:00').getTime(),\n          endTime: new Date('2021-01-14 23:00:00').getTime(),\n          color: '#FA3239',\n          startRatio: 0.65,\n          endRatio: 0.9\n        },\n        {\n          name: '时间段2',\n          beginTime: new Date('2021-01-15 02:00:00').getTime(),\n          endTime: new Date('2021-01-15 18:00:00').getTime(),\n          color: '#836ABB',\n          startRatio: 0.65,\n          endRatio: 0.9\n        }\n      ],\n      windowList: [\n        {\n          name: '窗口1',\n          timeSegments: [\n            {\n              name: '窗口1的时间段1',\n              beginTime: new Date('2021-01-13 10:00:00').getTime(),\n              endTime: new Date('2021-01-14 23:00:00').getTime(),\n              color: '#FA3239',\n              startRatio: 0.1,\n              endRatio: 0.9\n            },\n            {\n              name: '窗口1的时间段2',\n              beginTime: new Date('2021-01-12 18:00:00').getTime(),\n              endTime: new Date('2021-01-13 00:00:00').getTime(),\n              color: '#00AEFF',\n              startRatio: 0.1,\n              endRatio: 0.9\n            }\n          ]\n        },\n        {\n          name: '窗口2',\n          timeSegments: [\n            {\n              name: '窗口2的时间段1',\n              beginTime: new Date('2021-01-15 02:00:00').getTime(),\n              endTime: new Date('2021-01-15 18:00:00').getTime(),\n              color: '#FFCC00',\n              startRatio: 0.1,\n              endRatio: 0.9\n            }\n          ]\n        },\n        {\n          name: '窗口3'\n        },\n        {\n          name: '窗口4'\n        },\n        {\n          name: '窗口5'\n        },\n        {\n          name: '窗口6'\n        }\n      ],\n    }\n  },\n  computed: {\n    // 多个时间轴\n    showTime3 () {\n      return dayjs(this.time3).format('YYYY-MM-DD HH:mm:ss')\n    }\n  },\n  mounted () {\n    // 多个时间轴\n    setInterval(() =\u003e {\n      this.time3 += 1000\n      this.$refs.Timeline3.setTime(this.time3)\n    }, 1000)\n  },\n  methods: {\n    // 多个时间轴\n    timeChange3 (t) {\n      this.time3 = t\n    },\n    click_timeSegments3 (arr) {\n      alert('点击了：' + arr[0].name)\n    },\n    click_window_timeSegments (data, index, item) {\n      alert('点击了窗口时间轴的时间段：' + data[0].name)\n    },\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"less\" scoped\u003e\n.container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    position: relative;\n    justify-content: center;\n    flex-direction: column;\n\n    .timeline3 {\n        height: 200px;\n    }\n}\n\n.timeShow {\n  margin: 10px 0;\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\u003c/style\u003e\n```\n\n# 显示自定义元素\n\n有时候会想在时间轴上显示一些自定义的东西，比如某个时间段显示一张图片之类的，这可以通过监听某个时间点的位置来实现。\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"timeShow\"\u003e当前时间：{{showTime4}}\u003c/div\u003e\n    \u003cdiv class=\"timeLine4\"\u003e\n        \u003cTimeLine ref=\"Timeline4\" :initTime=\"time4\"  :windowList=\"windowList4\" @timeChange=\"timeChange4\"\u003e\u003c/TimeLine\u003e\n    \u003c/div\u003e\n    \u003ci class=\"icon h-icon-mark_f\" ref=\"flagIcon\" style=\"color: #E72528\"\u003e\u003c/i\u003e\n    \u003ci class=\"icon h-icon-car\" ref=\"carIcon\" style=\"color: #2196F3\"\u003e\u003c/i\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport dayjs from 'dayjs'\n\nexport default {\n  data () {\n    return {\n      // 显示自定义元素\n      time4: '2021-01-02 00:00:00',\n      windowList4: [\n        {\n          name: '窗口1',\n        },\n        {\n          name: '窗口2',\n        },\n        {\n          name: '窗口3'\n        },\n        {\n          name: '窗口4'\n        },\n        {\n          name: '窗口5'\n        },\n        {\n          name: '窗口6'\n        }\n      ],\n    }\n  },\n  computed: {\n    // 显示自定义元素\n    showTime4 () {\n      return dayjs(this.time4).format('YYYY-MM-DD HH:mm:ss')\n    }\n  },\n  mounted () {\n    // 显示自定义元素\n    setInterval(() =\u003e {\n      this.time4 += 1000\n      this.$refs.Timeline4.setTime(this.time4)\n    }, 1000)\n    window.addEventListener('scroll', () =\u003e {\n        this.$refs.Timeline4.updateWatchTime()\n    })\n    this.$refs.Timeline4.watchTime('2021-01-01 23:30:00', (x, y) =\u003e {\n        if (x === -1 || y === -1) {\n            this.$refs.flagIcon.style.display = 'none'\n        } else {\n            this.$refs.flagIcon.style.display = 'block'\n            this.$refs.flagIcon.style.left = x + 'px'\n            this.$refs.flagIcon.style.top = y + 24 + 'px'\n        }\n    })\n    this.$refs.Timeline4.watchTime('2021-01-02 02:30:00', (x, y) =\u003e {\n        if (x === -1 || y === -1) {\n            this.$refs.carIcon.style.display = 'none'\n        } else {\n            this.$refs.carIcon.style.display = 'block'\n            this.$refs.carIcon.style.left = x + 'px'\n            this.$refs.carIcon.style.top = y + 'px'\n        }\n    }, 2)\n  },\n  methods: {\n    // 显示自定义元素\n    timeChange4 (t) {\n      this.time4 = t\n    }\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"less\" scoped\u003e\n.container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    position: relative;\n    justify-content: center;\n    flex-direction: column;\n\n    .timeLine4 {\n        height: 200px;\n    }\n}\n\n.timeShow {\n  margin: 10px 0;\n  display: flex;\n  justify-content: center;\n  user-select: none;\n}\n\n.icon {\n  position: fixed;\n  font-size: 30px;\n}\n\u003c/style\u003e\n```\n\n# API\n\n## 属性\n\n| 参数  | 说明                               | 类型   | 可选值 | 默认值 |\n| ----- | ---------------------------------- | ------ | ------ | ------ |\n| initTime | 初始时间，中点所在的时间，默认为当天0点。可以传递数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00 | Number/String | —      |  |\n| timeRange | 中间刻度所允许显示的时间范围，即当前时间的限定范围，对象类型，字段见表1-1 | Object | —      |  |\n| initZoomIndex | 初始的时间分辨率，数字索引，时间分辨率数组为：['半小时', '1小时', '2小时', '6小时', '12小时', '1天', '3天', '15天', '30天', '365天', '3650天'] | Number | —      | 5 |\n| showCenterLine | 是否显示中间的竖线 | Boolean | —      | true |\n| centerLineStyle | 中间竖线的样式，对象类型，字段见表1-2 | Object | —      |  |\n| textColor | 日期时间文字的颜色 | String | —      | rgba(151,158,167,1) |\n| hoverTextColor | 鼠标滑过显示的时间文字颜色 | String | —      | rgb(194, 202, 215) |\n| lineColor | 时间刻度的颜色 | String | —      | rgba(151,158,167,1) |\n| lineHeightRatio | 时间刻度高度占时间轴高度的比例，对象格式，字段见表1-3 | Object | —      |  |\n| showHoverTime | 鼠标滑过时是否显示实时所在的时间 | Boolean | —      | true |\n| timeSegments | 要显示的时间颜色段，对象数组类型，对象字段见表1-4 | Array | —      | [] |\n| backgroundColor | 时间轴背景颜色 | String | —      | #262626 |\n| enableZoom | 是否允许鼠标滚动切换时间分辨率 | Boolean | —      | true |\n| enableDrag | 是否允许拖动 | Boolean | —      | true |\n| windowList | 播放窗口列表，播放窗口数量大于1的话可以配置此项，会显示和窗口对应数量的时间轴，只有一个窗口的话请直接使用基本时间轴，对象数组类型，对象字段见表1-5 | Array | —      | [] |\n| baseTimeLineHeight | 当显示windowList时的基础时间轴高度 | Number | —      | 50 |\n| initSelectWindowTimeLineIndex | 初始选中的窗口时间轴索引 | Number | —      | -1 |\n| maxClickDistance（v0.1.2+） | 鼠标按下和松开的距离小于该值认为是点击事件 | Number | —      | 3 |\n| roundWidthTimeSegments（v0.1.6+） | 绘制时间段时对计算出来的坐标进行四舍五入，可以防止相连的时间段绘制出来有间隔的问题 | Boolean | —      | true |\n| customShowTime（v0.1.7+） | 自定义显示哪些时间，详细请阅读下方【属性详解1-1】 | Function | — |  |\n| hoverTimeFormat（v0.1.9+） | 格式化鼠标滑过时间，函数类型，接收一个`time`参数，代表当前鼠标所在的时间戳，函数需要返回一个格式化后的时间字符串，默认显示的时间格式为`YYYY-MM-DD HH:mm:ss` | Function | — | |\n| showDateAtZero（v0.1.9+） | `0`点处是否显示日期，时间轴上默认`0`点处显示的日期，需要显示成时间，那么就需要设为`false`，然后通过`formatTime`属性自定义格式化 | Boolean | — | true |\n| formatTime（v0.1.9+） | 格式化时间轴显示时间，默认规则是`年`模式`YYYY`、`年月`模式`YYYY-MM`、`0`点`MM-DD`、其他`HH:mm`，如果想自定义，比如`0`点还是显示时间，不显示日期，就可以通过该函数进行格式化。如果该函数返回值为空值，那么还会走内部规则。 | Function | — |  |\n| extendZOOM（v0.1.9+） | 扩展ZOOM列表，详细请参考下方【属性详解1-2】 | Array | — | [] |\n\n### 属性详解1-1 customShowTime的用法\n\n\u003e  该属性在v0.1.7+版本开始支持\n\n当你在使用本组件的时候可能会遇到一个很常见的问题，比如容器的宽度很小，然后时间段展示的又是几天、甚至半个月的时间，那么很容易遇到时间段里面时间都挤在一起的问题，比如这个[issue](https://github.com/wanglin2/VideoTimeLine/issues/3)，其实组件内部是内置了一些判断方法，比如在`3天`的时间分辨率下，对应的`initZoomIndex=6`，对应关系可参考上方属性表格，那么就会使用`3天`的这个判断规则，如下：\n\n```js\ndate =\u003e { // 每三小时显示\n    return date.getHours() % 3 === 0 \u0026\u0026 date.getMinutes() === 0\n}\n```\n\n意思是显示`3`的倍数的整点小时，那么当你容器宽度不够，且时间分辨率设置的比较大，那么时间就会挤在一起看不清，这时候你就可以通过`customShowTime`属性传入自定义的判断方法，这个方法接收两个参数：\n\n- `date`：是否要显示的时间，可以根据该时间进行判断是否要显示这个时间\n- `currentZoomIndex`：当前的时间分辨率，比如`3天`对应的就是`6`，对应关系可参考上方属性表格\n\n那么如果内置的规则不满足的话，就可以自定义，比如`3天`的时间分辨率下我想只显示`12`倍数的小时，可以这么做：\n\n```html\n\u003cTimeLine :customShowTime=\"customShowTime\"\"\u003e\u003c/TimeLine\u003e\n```\n\n```js\nexport default {\n    methods: {\n        customShowTime(date, zoomIndex) {\n            if (zoomIndex === 6) {\n                return date.getHours() % 12 === 0 \u0026\u0026 date.getMinutes() === 0\n            }\n        }\n    }\n}\n```\n\n函数返回值需要注意一下，如果要显示返回`true`，如果不显示返回`false`，如果不处理，仍旧交给内部规则，返回其他值。\n\n\n\n### 属性详解1-2  extendZOOM的用法\n\n该属性用于扩展`ZOOM`列表，即时间分辨率，内置了`11`个时间分辨率，可以参考上方表格`initZoomIndex`属性，如果内置的时间分辨率满足不了你，那么可以通过该属性进行扩展。\n\n`extendZOOM`为数组类型，数组的每一项为：\n\n```js\n{\n    zoom: 26, // 时间分辨率，整个时间轴表示的时间范围，单位：小时\n    zoomHourGrid: 0.5, //时间分辨率对应的每格小时数，即时间轴上最小格代表多少小时\n    mobileZoomHourGrid: 2, // 手机模式下时间分辨率对应的每格小时数，如果不用适配手机端，可以不用设置\n}\n```\n\n这个数组的数据会追加到内部的`ZOOM`数组，对应的`zoomIndex`往后累加即可，内部一共有`11`个`zoom`，那么你追加了一项，对应的`zoomIndex`为11，因为是从零开始计数。\n\n同时你需要传递`customShowTime`属性来自定义控制时间显示，否则会报错，因为内置的规则只有`11`个。\n\n接下来看一个案例。\n\n\u003e 只显示当天的时间， 从00:00:00到23:59:59，详细请看这个[issue](https://github.com/wanglin2/VideoTimeLine/issues/6)\n\n首先默认的`initZoomIndex`为`5`，即`1`天，刚好满足，不用修改，然后将`enableZoom`设为`false`，不允许修改时间分辨率；将`enableDrag`设为`false`，不允许拖拽； 然后再将`initTime`设为当天的`12:00:00`，那么刚好整个时间轴显示的就是当前的时间，到这里，似乎就可以了。但是实际上会存在一些问题，如前面的`issue`中所示。\n\n问题1：`0`点处显示的是日期，需要改成时间\n\n很简单，将`showDateAtZero`设为`false`，`0`点就不会显示日期了\n\n问题2：鼠标滑过显示的还是带日期的，这个好办，通过`hoverTimeFormat`属性自定义格式化规则即可：\n\n```js\nhoverTimeFormat(time) {\n    // 小于今天，大于今天的时间不显示\n    if (\n        dayjs(time).isBefore(dayjs().format('YYYY-MM-DD 00:00:00')) ||\n        dayjs(time).isAfter(dayjs().format('YYYY-MM-DD 23:59:59'))\n    ) {\n        return ''\n    }\n    return dayjs(time).format('HH:mm:ss')\n}\n```\n\n问题3：左右两侧的时间显示不出来\n\n即`0`点和`24`点的时间刚好是两端，因实现原理问题，无法显示，怎么办呢，其实很简单，假如时间轴表示的时间范围为`25`小时，那么左右两端不就会各多出半小时的时间吗，这个空间足够显示时间了，但是内部的时间分辨率没有`25`小时的，这时就需要扩展时间分辨率了：\n\n```js\nextendZOOM: [\n    {\n        zoom: 25,\n        zoomHourGrid: 0.5\n    }\n]\n```\n\n扩展了`extendZOOM`，`customShowTime`不能少，否则会报错：\n\n```js\ncustomShowTime(date, zoomIndex) {\n    // 当zoomIndex等于11，也就是等于我们开展的zoom时才自己处理\n    if (zoomIndex === 11) {\n        // 时间是2的倍数时才会显示\n        return date.getHours() % 2 === 0 \u0026\u0026 date.getMinutes() === 0\n    }\n}\n```\n\n到这里，你还会发现一个问题，`24`点实际上是下一天的`0`点，所以显示的是`00:00`，这样可能不符合我们的需求，这时我们可以通过`formatTime`来格式化时间轴上的时间显示，判断是下一天的`0`点，那么就改成`24:00`：\n\n```js\nformatTime(time) {\n    // 下一天的00:00显示24:00\n    if (time.isAfter(dayjs().format('YYYY-MM-DD 23:59:59'))) {\n        return '24:00'\n    }\n    if (\n        time.hour() === 0 \u0026\u0026\n        time.minute() === 0 \u0026\u0026\n        time.millisecond() === 0\n    ) {\n        return time.format('HH:mm')\n    }\n}\n```\n\n完整代码请参考：[CustomZoom.vue](https://github.com/wanglin2/VideoTimeLine/blob/main/demo/src/components/CustomZoom.vue)。\n\n\n\n### 表1-1 timeRange对象的字段格式\n\n| 字段名  | 说明                               | 类型   | 可选值 | 默认值 |\n| ----- | ---------------------------------- | ------ | ------ | ------ |\n| start | 允许显示的最小时间，可以传递数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00 | Number/String | —      |  |\n| end | 允许显示的最大时间，可以传递数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00 | Number/String | —      |  |\n\n### 表1-2 centerLineStyle对象的字段格式\n\n| 字段名  | 说明                               | 类型   | 可选值 | 默认值 |\n| ----- | ---------------------------------- | ------ | ------ | ------ |\n| width | 线的宽度，单位px | Number | —      | 2 |\n| color | 线的颜色 | String | —      | #fff |\n\n### 表1-3 lineHeightRatio对象的字段格式\n\n| 字段名  | 说明                               | 类型   | 可选值 | 默认值 |\n| ----- | ---------------------------------- | ------ | ------ | ------ |\n| date | 0点时的日期线段高度 | Number | —      | 0.3 |\n| time | 显示时间的线段高度 | Number | —      | 0.2 |\n| none | 不显示时间的线段高度 | Number | —      | 0.1 |\n| hover | 鼠标滑过时显示的时间段高度 | Number | —      | 0.3 |\n\n### 表1-4 timeSegments数组的对象元素的字段格式\n\n| 字段名  | 说明                               | 类型   | 可选值 | 默认值 |\n| ----- | ---------------------------------- | ------ | ------ | ------ |\n| beginTime | 起始时间戳，必填 | Number | —      |  |\n| endTime | 结束时间戳，必填 | Number | —      |  |\n| color | 颜色，必填 | String | —      |  |\n| startRatio | 高度的起始比例，即top=时间轴高度*startRatio | Number | —      | 0.6 |\n| endRatio | 高度的结束比例，即bottom=时间轴高度*endRatio | Number | —      | 0.9 |\n\n\u003e 从v0.1.8+版本开始，时间段可以只传一个beginTime，绘制一根宽度为1px的线段\n\n### 表1-5 windowList数组的对象元素的字段格式\n\n| 字段名  | 说明                               | 类型   | 可选值 | 默认值 |\n| ----- | ---------------------------------- | ------ | ------ | ------ |\n| timeSegments | 要显示的时间段，对象数组，对象字段见表1-4 | Array | —      | [] |\n可以添加你需要的其他任意字段\n\n## 事件\n\n| 事件  | 说明                               | 回调函数参数 |\n| ----- | ---------------------------------- | ------ |\n| timeChange | 当前时间切换事件 | currentTime（当前时间，时间戳格式） |\n| dragTimeChange | 拖动时间条结束后的事件 | currentTime（当前时间，时间戳格式） |\n| mousedown | 鼠标按下事件 | e（事件对象） |\n| mouseup | 鼠标松开事件 | e（事件对象） |\n| click_timeSegments | 点击到了基础时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、time（v0.1.10+，点击位置对应的时间戳）、 date（v0.1.10+，点击位置对应的日期时间字符串）、 x（v0.1.10+，点击位置相对时间轴左侧的距离） |\n| click_window_timeSegments | 点击到了窗口时间轴里的时间段时触发 | timeSegments（点击到的时间段，数组类型）、index（时间轴索引）、item（时间轴数据） |\n| change_window_time_line | 点击窗口时间轴进行切换选中时触发 | index（时间轴索引）、item（时间轴数据） |\n| click_timeline（v0.1.2+） | 时间轴的点击事件 | time（点击位置对应的时间戳）、 date（点击位置对应的日期时间字符串）、 x（点击位置相对时间轴左侧的距离） |\n\n## 方法\n\n| 方法名  | 说明                               | 参数 |\n| ----- | ---------------------------------- | ------ |\n| updateWatchTime | 手动更新观察的时间位置，比如页面滚动后时间轴的整体位置变化了需要调用，如果没有显示自定义元素时无需调用 |  |\n| reRender | 重新渲染 |  |\n| setTime | 设置当前时间 | t（数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00） |\n| setZoom | 设置分辨率 | index（分辨率索引） |\n| watchTime | 设置要观察的时间点，会返回该时间点的实时位置，可以根据该位置来设置一些自定义元素的位置，位置为相对于浏览器可视窗口的位置 | time（要观察的时间，数字类型的时间戳或字符串类型的时间，如：2020-12-19 18:30:00）, callback（时间点位置变化时会调用，回调参数为x水平位置、y重置位置，单位px）, windowTimeLineIndex（如果自定义元素是要显示到某个窗口时间轴里的话，可以通过该参数来指定第几个时间轴，数字索引，从1开始） |\n| onResize | 如果时间轴所在的容器尺寸变化了需要调用该方法来适应 |  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanglin2%2Fvideotimeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwanglin2%2Fvideotimeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanglin2%2Fvideotimeline/lists"}