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);
   
    },
Logo

前往低代码交流专区

更多推荐