vue 视频 时间进度条组件-使用npm组件
vue 视频 时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0版本https://www.npmjs.com/package/as-time-line1,安装npm i as-time-line -S2,引用,在vue里面的main.js中引入,添加代码如下impo
·
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);
},
更多推荐
已为社区贡献26条内容
所有评论(0)