vue进度条显示进度,vue 进度条
这篇文章主要为大家详细介绍了某视频剪辑软件视频时间进度条组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件视频时间进度条组件的使用方法，供大家参考，具体内容如下
有些视频是以视频流的形式进行渲染的，没有视频滚动条，所以就写了24小时的时间组件
实现思路：
1、24小时的时间刻度线总宽度为12960像素
2、点击24小时线的某一点，获取这一点离左侧原点的距离（使用数字正射影像图元素layerX和获取综合判断)
3、计算点击时线段的占比比率
4、每天的时间是86400000毫秒
5、占比比率乘以86400000就是获取的你点击的时间
代码如下：
模板
div class=" time-main "
div class= center-content ref= center ref
差异
ref=timeRef
时间线
@点击。capture= click timeline($ event)
模板v-for=(item，i) in timeArr
差异
:key=a i
class=基线
:style={ left: 90 * i px ，height: 14 px }
/div
div:key= I class= base-title :style= { left:4 90 * I px }
{{ item }}
/div
差异
:key=b i
class=基线
:style={ left: 18 90 * i px }
/div
差异
:key=c i
class=基线
:style={ left: 36 90 * i px }
/div
差异
:key=d i
class=基线
:style={ left: 54 90 * i px }
/div
差异
:key=e i
class=基线
:style={ left: 72 90 * i px }
/div
/模板
/div
/div
BTN-内容
div class= left-arow @ click= clickRightMove
我是El-icon-向左箭头/i
/div
部门{{昨天日期时间格式日期时间} }/分区
div class= right-arow @ click= click left move
i class=el-icon-arrow-right/i
/div
/div
/div
/模板
脚本
导入{
比较一下，
exactDiv，
exactMul，
exactSub，
exactAdd，
十进制格式，
}来自@/util/util。js’；
导出默认值{
名称："时间线",
//注入：[screenNum]，
//观察：{
//screenNum: {
//处理程序(瓦尔){
//console.log(切换了val==，val)；
//},
//},
//},
道具：{
日期：{
类型：数组，
},
},
data() {
返回{
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,
],
开关宽度编号：540,
昨天时间：0,
clickTimeVal: 0，
};
},
已安装(){
//这个。handlewidthfn()；
这个。dealscrollmove()；
//console.log(mounted==，这个。日期arr)；
},
方法：{
dealScrollMove() {
如果（这个参考文献。中心参考。offsetwidth=540){
这个。开关宽度num=540
} else if(这个参考文献。中心参考。offsetwidth=360){
这个。开关宽度num=360
} else if(这个参考文献。中心参考。offsetwidth=270){
这个。开关宽度num=270
} else if(这个参考文献。中心参考。offsetwidth=180){
这个。开关宽度num=180
}否则{
这个。开关宽度num=90
}
设时间0=新日期（新日期()。toLocaleDateString()).getTime()；//获取当日0点时间戳
设时间1=新日期()。getTime()；//当前时间
设sumTimeWidth=12960
设dayTimeSum=86400000//一天的毫秒数
//if (this.clickTimeVal) {
//时间1=这个。点击时间值；
//console.log(进==，时间1)；
//console.log(进=2=，这个。点击时间值)；
//}
if (this.dateArr.length 0) {
时间1=这个。日期arr[0]；
time0=exactSub(time0，日时间总和)；
console.log(进==，这个。日期arr)；
console.log(进=2=，这个。点击时间值)；
}
设timeSub=exactSub(time1，time 0)；
//console.log(timeSub=，timeSub)；
if (this.dateArr.length 0) {
这个。昨天时间=这个。日期arr[0]；
这个。点击时间值=这个。日期arr[0]；
}否则{
这个。yesterdaytime=exact sub(time 0，day time sum)；
}
设dayPer=exactDiv(timeSub，day time sum)；//一天的百分比
console.log(exactDiv(timeSub，dayTimeSum)=)，this。昨天时间)；
//console.log(dayPer==，day per)；
设滚动宽度=精确倍数(总时间宽度，每天)；
//控制台。log(滚动宽度=333333=，滚动宽度)；
//控制台。log(滚动宽度=33
//除以开关宽度数量获取点击的个数
设switchClickCnt=exact div(滚动宽度，this。开关宽度数)；
//控制台。log( switchClickCnt==，switchClickCnt)；
这个。click CNT=parse int(switchClickCnt)-1；
这个。clickleftmove()；
//console.log(点击的数量1===，这个。点击CNT)；
},
handleWidthFn() {
这个. nextTick(()={
如果（这个参考文献。中心参考。offsetwidth=540){
这个。开关宽度num=540
} else if(这个参考文献。中心参考。offsetwidth=360){
这个。开关宽度num=360
} else if(这个参考文献。中心参考。offsetwidth=270){
这个。开关宽度num=270
} else if(这个参考文献。中心参考。offsetwidth=180){
这个。开关宽度num=180
}否则{
这个。开关宽度num=90
}
});
},
单击时间线（事件){
//console.log(event==，event)；
//console.log(event=layerX==，事件。layerX)；
//控制台。日志( event=layerX=target==，事件。目标。向左偏移)；
设sumTimeWidth=12960
设dayTimeSum=86400000//一天的毫秒数
设时间0=新日期（新日期()。toLocaleDateString()).getTime()；//获取当日0点时间戳
设yesterdayTime=exactSub(time0，day time sum)；
设时间点num=0；
//className:时间线
如果(事件。目标。class name== time-line ){
时间点编号=事件。layerx
}否则{
时间点编号=精确添加(事件。layerx，事件。目标。向左偏移)；
}
设timemove=exactAdd(timePointNum，this。leftmovewidth)；
let timePer=exactDiv(timemove，sum时间宽度)；//点击的百分比
设clickTimeNum=exact mul(一天时间总和，每分钟时间)；//
设true time num=exact add(点击时间num，yesterdayTime)；//时间
设fomretTime=parse int(true time num)；
this.clickTimeVal=新日期(时间).getTime()；
这个发出(
handleClickTimeLineFn ，
新日期（时间)
);
//console.log(trueTimeNum==，true time num)；
//console.log(fomretTime==，fomretTime)；
//console.log(new Date==，new Date(fomretTime))；
},
单击左移动(){
//console.log(点击的数量==2=，这个。点击CNT)；
这个。handlewidthfn()；
//console.log(this .$refs.centerRef==，这个参考文献。中心参考)；
//控制台。log( center ref=offsetWidth=，this .$参考文献。中心参考。offsetwidth)；
//控制台。log( center ref=client width=，this .$参考文献。中心参考。客户端宽度)；
if (this.endTimeFlag) {
返回；
}
this.clickCnt
这个。leftmovewidth=this。点击CNT * this。开关宽度数字；
设让宽度=这个。点击CNT * this。开关宽度数字“px”；
//控制台。日志(这个。点击CNT)；
//console.log(this .$refs.timeRef==，这个参考文献。时间参考)；
if (this.leftMoveWidth this .$参考文献。中心参考。offsetwidth 12960){
letWidth=12960 -这个参考文献。中心参考。offsetwidth“px”；
这个。结束时间标志=真；
}否则{
这个。结束时间标志=假；
}
这个参考文献。时间参考。风格。transform= translate x(- lett width )；
这个参考文献。时间参考。风格。过渡=全0.5s ；
},
单击右键移动(){
这个。handlewidthfn()；
if (this.clickCnt 0) {
这个。点击CNT-；
}
这个。leftmovewidth=this。点击CNT * this。开关宽度数字；
设让宽度=这个。点击CNT * this。开关宽度数字“px”；
//控制台。日志(这个。点击CNT)；
//console.log(this .$refs.timeRef==，这个参考文献。时间参考)；
if (this.endTimeFlag) {
这个。结束时间标志=假；
}
这个参考文献。时间参考。风格。transform= translate x(- lett width )；
这个参考文献。时间参考。风格。过渡=全0.5s ；
},
},
};
/脚本
样式范围的语言=scss 。主要时间{
位置：相对；
宽度：100%;
边距：自动；
溢出：隐藏；
//display:flex；
//边框：1px纯红；
}。中心-内容{
宽度：calc(100%-30px)；
左边距：30px
溢出：隐藏；
}。BTN-内容{
宽度：calc(100%-30px)；
左边距：30px
显示器：flex
justify-content:space-between；
颜色：# fff
}。时间线
位置：相对；
字体大小：12px
/*左：-7357.15 px；*/
//left:30px；
高度：19px
宽度：12960像素
底部边框：1px纯色rgb(90，90，90)；
边距：0px
填充：0px
转场：左0.9秒缓0s；
颜色：# fff
z指数：10;
：悬停{
光标：指针；
}。基本标题{
位置：绝对；
左：4px
底部：3px
颜色：# fff
z索引：-1;
}
}。基线{
位置：绝对；
宽度：1px
高度：4px
底部：0px
背景色：rgb(90，90，90)；
z指数：9;
}。向左箭头{
//位置：绝对；
//左：2%;
颜色：# fff
字体大小：20px
}。右箭头{
//位置：绝对；
//右：2%;
颜色：# fff
字体大小：20px
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。