vue视频时间进度条组件使用方法详解
本文实例为大家分享了vue视频时间进度条组件的使用方法，供大家参考，具体内容如下
有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24h的时间组件
实现思路：
1、24h的时间刻度线总宽度为12960px
2、点击24h线的某一点，获取这一点离左侧原点的距离（使用dom元素layerX和offsetLeft综合判断）
3、计算点击时线段的占比比率
4、每天的时间是86400000毫秒
5、占比比率乘以86400000就是获取的你点击的时间
代码如下：
<template>
<div class="time-main">
<div class="center-content" ref="centerRef">
<div
ref="timeRef"
class="time-line"
@click.capture="clickTimeLine($event)"
>
<template v-for="(item, i) in timeArr">
<div
:key="'a' + i"
class="base-line"
:style="{ left: 90 * i + 'px', height: 14 + 'px' }"
></div>
<div :key="i" class="base-title" :style="{ left: 4 + 90 * i + 'px' }">
{{ item }}
</div>
<div
:key="'b' + i"
class="base-line"
:style="{ left: 18 + 90 * i + 'px' }"
></div>
<div
:key="'c' + i"
class="base-line"
:style="{ left: 36 + 90 * i + 'px' }"
></div>
<div
:key="'d' + i"
class="base-line"
:style="{ left: 54 + 90 * i + 'px' }"
></div>
<div
:key="'e' + i"
class="base-line"
:style="{ left: 72 + 90 * i + 'px' }"
></div>
</template>
</div>
</div>
<div class="btn-content">
<div class="left-arow" @click="clickRightMove">
<i class="el-icon-arrow-left"></i>
</div>
<div>{{ yesterdayTime | formatDateTime }}</div>
<div class="right-arow" @click="clickLeftMove">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</template>
<script>
import {
compare,
exactDiv,
exactMul,
exactSub,
exactAdd,
decimalsFormat,
} from "@/util/util.js";
export default {
name: "timeLine",
// inject: ["screenNum"],
// watch: {
// screenNum: {
// handler(val) {
// console.log("切换了val==", val);
// },
// },
// },
props: {
dateArr: {
type: Array,
},
},
data() {
return {
clickCnt: 0,
leftMoveWidth: 0,
endTimeFlag: false,
timeArr: [
"00:00",
"00:10",
"00:20",
"00:30",
"00:40",
"00:50",
"01:00",
"01:10",
"01:20",
"01:30",
"01:40",
"01:50",
"02:00",
"02:10",
"02:20",
"02:30",
"02:40",
"02:50",
"03:00",
"03:10",
"03:20",
"03:30",
"03:40",
"03:50",
"04:00",
"04:10",
"04:20",
"04:30",
"04:40",
"04:50",
"05:00",
"05:10",
"05:20",
"05:30",
"05:40",
"05:60",
"06:00",
"06:10",
"06:20",
"06:30",
"06:40",
"06:50",
"07:00",
"07:10",
"07:20",
"07:30",
"07:40",
"07:50",
"08:00",
"08:10",
"08:20",
"08:30",
"08:40",
"08:50",
"09:00",
"09:10",
"09:20",
"09:30",
"09:40",
"09:50",
"10:00",
"10:10",
"10:20",
"10:30",
"10:40",
"10:50",
"11:00",
"11:10",
"11:20",
"11:30",
"11:40",
"11:50",
"12:00",
"12:10",
"12:20",
"12:30",
"12:40",
"12:50",
"13:00",
"13:10",
"13:20",
"13:30",
"13:40",
"13:50",
"14:00",
"14:10",
"14:20",
"14:30",
"14:40",
"14:50",
"15:00",
"15:10",
"15:20",
"15:30",
"15:40",
"15:50",
"16:00",
"16:10",
"16:20",
"16:30",
"16:40",
"16:50",
"17:00",
"17:10",
"17:20",
"17:30",
"17:40",
"17:50",
"18:00",
"18:10",
"18:20",
"18:30",
"18:40",
"18:50",
"19:00",
"19:10",
"19:20",
"19:30",
"19:40",
"19:50",
"20:00",
"20:10",
"20:20",
"20:30",
"20:40",
"20:50",
"21:00",
"21:10",
"21:20",
"21:30",
"21:40",
"21:50",
"22:00",
"22:10",
"22:20",
"22:30",
"22:40",
"22:50",
"23:00",
"23:10",
"23:20",
"23:30",
"23:40",
"23:50",
],
switchWidthNum: 540,
yesterdayTime: 0,
clickTimeVal: 0,
};
},
mounted() {
// this.handleWidthFn();
this.dealScrollMove();
// console.log("mounted==", this.dateArr);
},
methods: {
dealScrollMove() {
if (this.$refs.centerRef.offsetWidth >= 540) {
this.switchWidthNum = 540;
} else if (this.$refs.centerRef.offsetWidth >= 360) {
this.switchWidthNum = 360;
} else if (this.$refs.centerRef.offsetWidth >= 270) {
this.switchWidthNum = 270;
} else if (this.$refs.centerRef.offsetWidth >= 180) {
this.switchWidthNum = 180;
} else {
this.switchWidthNum = 90;
}
let time0 = new Date(new Date().toLocaleDateString()).getTime(); //获取当日0点时间戳
let time1 = new Date().getTime(); // 当前时间
let sumTimeWidth = 12960;
let dayTimeSum = 86400000; //一天的毫秒数
// if (this.clickTimeVal) {
// time1 = this.clickTimeVal;
// console.log("进==", time1);
// console.log("进=2=", this.clickTimeVal);
// }
if (this.dateArr.length > 0) {
time1 = this.dateArr[0];
time0 = exactSub(time0, dayTimeSum);
console.log("进==", this.dateArr);
console.log("进=2=", this.clickTimeVal);
}
let timeSub = exactSub(time1, time0);
// console.log("timeSub=", timeSub);
if (this.dateArr.length > 0) {
this.yesterdayTime = this.dateArr[0];
this.clickTimeVal = this.dateArr[0];
} else {
this.yesterdayTime = exactSub(time0, dayTimeSum);
}
let dayPer = exactDiv(timeSub, dayTimeSum); //一天的百分比
console.log("exactDiv(timeSub, dayTimeSum)==", this.yesterdayTime);
// console.log("dayPer==", dayPer);
let scrollWidth = exactMul(sumTimeWidth, dayPer);
// console.log("scrollWidth=333333=", scrollWidth);
// console.log("scrollWidth=33333555553=", this.switchWidthNum);
// 除以switchWidthNum 获取点击的个数
let switchClickCnt = exactDiv(scrollWidth, this.switchWidthNum);
// console.log("switchClickCnt==", switchClickCnt);
this.clickCnt = parseInt(switchClickCnt) - 1;
this.clickLeftMove();
// console.log("点击的数量1===", this.clickCnt);
},
handleWidthFn() {
this.$nextTick(() => {
if (this.$refs.centerRef.offsetWidth >= 540) {
this.switchWidthNum = 540;
} else if (this.$refs.centerRef.offsetWidth >= 360) {
this.switchWidthNum = 360;
} else if (this.$refs.centerRef.offsetWidth >= 270) {
this.switchWidthNum = 270;
} else if (this.$refs.centerRef.offsetWidth >= 180) {
this.switchWidthNum = 180;
} else {
this.switchWidthNum = 90;
}
});
},
clickTimeLine(event) {
// console.log("event==", event);
// console.log("event=layerX==", event.layerX);
// console.log("event=layerX=target===", event.target.offsetLeft);
let sumTimeWidth = 12960;
let dayTimeSum = 86400000; //一天的毫秒数
let time0 = new Date(new Date().toLocaleDateString()).getTime(); //获取当日0点时间戳
let yesterdayTime = exactSub(time0, dayTimeSum);
let timePointNum = 0;
// className: "time-line"
if (event.target.className == "time-line") {
timePointNum = event.layerX;
} else {
timePointNum = exactAdd(event.layerX, event.target.offsetLeft);
}
let timemove = exactAdd(timePointNum, this.leftMoveWidth);
let timePer = exactDiv(timemove, sumTimeWidth); // 点击的百分比
let clickTimeNum = exactMul(dayTimeSum, timePer); //
let trueTimeNum = exactAdd(clickTimeNum, yesterdayTime); // time
let fomretTime = parseInt(trueTimeNum);
this.clickTimeVal = new Date(fomretTime).getTime();
this.$emit(
"handleClickTimeLineFn",
new Date(fomretTime)
);
// console.log("trueTimeNum==", trueTimeNum);
// console.log("fomretTime==", fomretTime);
// console.log("new Date==", new Date(fomretTime));
},
clickLeftMove() {
// console.log("点击的数量==2=", this.clickCnt);
this.handleWidthFn();
// console.log("this.$refs.centerRef==", this.$refs.centerRef);
// console.log("centerRef=offsetWidth=", this.$refs.centerRef.offsetWidth);
// console.log("centerRef=clientWidth=", this.$refs.centerRef.clientWidth);
if (this.endTimeFlag) {
return;
}
this.clickCnt++;
this.leftMoveWidth = this.clickCnt * this.switchWidthNum;
let letWidth = this.clickCnt * this.switchWidthNum + "px";
// console.log(this.clickCnt);
// console.log("this.$refs.timeRef==", this.$refs.timeRef);
if (this.leftMoveWidth + this.$refs.centerRef.offsetWidth > 12960) {
letWidth = 12960 - this.$refs.centerRef.offsetWidth + "px";
this.endTimeFlag = true;
} else {
this.endTimeFlag = false;
}
this.$refs.timeRef.style.transform = "translateX(-" + letWidth + ")";
this.$refs.timeRef.style.transition = "all 0.5s";
},
clickRightMove() {
this.handleWidthFn();
if (this.clickCnt > 0) {
this.clickCnt--;
}
this.leftMoveWidth = this.clickCnt * this.switchWidthNum;
let letWidth = this.clickCnt * this.switchWidthNum + "px";
// console.log(this.clickCnt);
// console.log("this.$refs.timeRef==", this.$refs.timeRef);
if (this.endTimeFlag) {
this.endTimeFlag = false;
}
this.$refs.timeRef.style.transform = "translateX(-" + letWidth + ")";
this.$refs.timeRef.style.transition = "all 0.5s";
},
},
};
</script>
<style scoped lang="scss">
.time-main {
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
// display: flex;
// border: 1px solid red;
}
.center-content {
width: calc(100% - 30px);
margin-left: 30px;
overflow: hidden;
}
.btn-content {
width: calc(100% - 30px);
margin-left: 30px;
display: flex;
justify-content: space-between;
color: #fff;
}
.time-line {
position: relative;
font-size: 12px;
/* left: -7357.15px; */
// left: 30px;
height: 19px;
width: 12960px;
border-bottom: 1px solid rgb(90, 90, 90);
margin: 0px;
padding: 0px;
transition: left 0.9s ease 0s;
color: #fff;
z-index: 10;
&:hover {
cursor: pointer;
}
.base-title {
position: absolute;
left: 4px;
bottom: 3px;
color: #fff;
z-index: -1;
}
}
.base-line {
position: absolute;
width: 1px;
height: 4px;
bottom: 0px;
background-color: rgb(90, 90, 90);
z-index: 9;
}
.left-arow {
// position: absolute;
// left: 2%;
color: #fff;
font-size: 20px;
}
.right-arow {
// position: absolute;
// right: 2%;
color: #fff;
font-size: 20px;
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符 通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z]) 这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00
-
vue实现简单loading进度条
刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级. 一.进度条原理 这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条.主要是让进度条的width不断增加至100%就可以啦~好了,进入正题. 二.jquery实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset
-
vue页面加载时的进度条功能(实例代码)
先看一张图 如果我们的程序每次页面切换时,顶部也有一个进度条,那会让用户体验提升很大的. npropgress插件 github地址 简单用法 - Vue 项目为例(详细配置,点击上面的github地址查看文档) 最简单的使用方式:vue项目的每次路由切换时,都加载进度条 安装 npm install --save nprogress 引入 在路由配置文件中引入,写到路由加载前和加载后的两个钩子函数中 // 引入 import NProgress from 'nprogress'; import
-
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
一.格式化时间 效果图: 实现上述界面代码如下: data() { return { loading: false, demandData: [], demandcount: 0,//总条数 skip: 0, //分页 pageSize: this.LIMIT, columns: [ { title: '编号', width: 60, align: 'center', type: 'index' }, { title: '标签名称', key: 'd_title' }, { title: '创建
-
vue开发拖拽进度条滑动组件
分享一个最近写的进度条滑动组件,以前都是用jq写,学会了vue,尝试着拿vue来写觉得非常简单,代码复用性很强! 效果图如下: 调用组件如下: <slider :min=0 :max=100 v-model = "per"></slider> <template> <div class="slider" ref="slider"> <div class="process"
-
Vue进度条progressbar组件功能
效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 ◾ 项目搭建 progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 ◾ progressbar源文件之template progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部
-
vue2.0实现音乐/视频播放进度条组件
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口
-
Vue实现带进度条的文件拖动上传功能
1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1
-
在vue项目中使用Nprogress.js进度条的方法
NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro
-
vue组件实现进度条效果
本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下 一.效果图 二.代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{