[JavaScript知识库]vue 视频 时间进度条组件-使用npm组件

vue 视频 时间进度条组件
有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24h的时间组件

组件已上传到npm上，npm i as-time-line下载安装即可，最少需要1.2.0版本
https://www.npmjs.com/package/as-time-line
1，安装

npm i as-time-line -S

2，引用，在vue里面的main.js中引入，添加代码如下

import timeLine from "as-time-line";
import "as-time-line/lib/timeline.css";

如下一个main.js 样例

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;
import timeLine from "as-time-line";
import "as-time-line/lib/timeline.css";
Vue.use(timeLine);
new Vue({
  render: (h) => h(App),
}).$mount("#app");

3，使用
dateArr 是一个 数组，存放的是一个开始时间和结束时间的时间戳，就是getTime()

 <time-line
          ref="timeLienRef"
          :colorVal="'#000000'" 
          @handleClickTimeLineFn="handleClickTimeLineFn"
          :dateArr="dateArr"
        ></time-line>



// handleClickTimeLineFn  获取点击的时间
handleClickTimeLineFn(date) {
      console.log("date==", date);
   
    },