vue 时间控件,vue横向时间轴插件
这篇文章主要为大家详细介绍了某视频剪辑软件实现时间轴功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现时间轴功能的具体代码，供大家参考，具体内容如下
模板
div class=容器
div class=内容
数学中的div class=coin v-for=(item，index 1)。ceil((列表。length 1)/4):key= index 1 v-show= is show==index 1
div class=xs_one/div
差异
“硬币”
列表中的v-for=(项目，索引
:key=index
:class="{ one:index % 4==0 } "
v-show= index(index 11)* 4 index 1(index 1)* 4
跨度
:class={
二：(索引1) % 2==0,
text_active: index==isIndex，
}
{{ item }}
/span
div class= xs :class= { xs _ active:index==is index } /div
img src=./资产/img/coin 1。png alt= v-show= index==is index /
img src=./资产/img/coin 2。png alt= v-show= index！=isIndex /
/div
/div
div class= paging :style= { width:math。ceil((列表。长度1)/4)* 20 px }
数学中的div class=pagings v-for=(项目，索引1)。ceil((列表。length 1)/4):key= index 1 @ click= tabList(index 1):class= { is _ activ:is show==index 1 } { { index } }/div
/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
列表：[实施方案, 任务书, 中期检查, 项目验收, 分页功能1,分页功能1,分页功能1,分页功能1,分页功能2], //列表
isIndex: 0，//高亮显示
isShow: 1，//显示
};
},
方法：{
tabList(idx){
this.isShow=idx
}
}
};
/脚本
样式范围。内容{
宽度：400像素
高度：120像素
背景：rgb(9，27，70)；
位置：相对；
}。分页{
高度：20px
位置：绝对；
底部：10px
左：50%;
转换：平移(-50%);
}。寻呼部门{
宽度：15px
高度：15px
边界半径：50%;
背景：rgb(120，120，120)；
浮动：左；
左边距：5px
}。硬币{
宽度：100%;
高度：80px
背景：rgb(9，27，70)；
位置：相对；
溢出-x:隐藏；
}。xs_one {
宽度：100%;
高度：5px
背景：rgb(61，183，270)；
位置：绝对；
top:50%；
左：0;
transform: translate(0，-50%)；
}。硬币。硬币{
宽度：100像素
身高：100%;
浮动：左；
位置：相对；
}。硬币。一个
左边距：-50px；
}。硬币coinAll img {
位置：绝对；
top:50%；
右：0;
transform: translate(0，-50%)；
}。硬币。硬币. xs {
宽度：100%;
高度：5px
背景：rgb(61，183，270)；
位置：绝对；
top:50%；
左：0;
transform: translate(0，-50%)；
}。硬币。硬币跨度{
宽度：100%;
颜色：# fff
字体大小：16px
位置：绝对；
top:5px；
}。硬币。硬币。两个
宽度：100%;
颜色：# fff
字体大小：16px
位置：绝对；
top:55px；
}
/* 文字高亮*/。硬币。硬币text_active {
颜色：rgb(245，189，39)；
}
/* 线条高亮*/。硬币。硬币. xs_active {
背景：rgb(245，189，39)；
}。传呼is_activ{
背景：rgb(26，82，229)；
}
/风格
效果如图
新增分页
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。