vue横向时间轴插件,vue时钟效果
这篇文章主要为大家详细介绍了某视频剪辑软件实现时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现时间轴效果的具体代码，供大家参考，具体内容如下
时间轴上的时间点数和描述文本均可自定义设置
效果图如下：
创建时间轴组件Timeline.vue:
模板
div class= m-时间线-面积
div class=m时间轴
差异
:class=[m-timeline-item ，{last: n===totalDots}]
v-for=n in totalDots
:key=n
div class=u形尾部/div
div class=u-dot/div
u内容
p{{ timelineDesc[n-1] }}/p
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称："时间线",
道具：{
timelineDesc: {
类型：数组，
默认值：()={
return []
}
},
totalDots: {
类型：数量，
默认值：3
}
}
}
/脚本
style lang=less 范围
@ blue:# 1890 ff；
@绿色：# 52c 41a
@ red:# f 5222d；
@gray: rgba(0，0，0，25);间位时间线-区域{
宽度：360像素
边距：30px自动；间位时间轴{。间位时间线-项目{
位置：相对；
填充-底部：30px。u形尾翼{
位置：绝对；
top:10px；
左：5px
高度：calc(100%-10px)；
border-left:2px solid # e8e8e 8；//实线
//border-left:2px dotted # e8e8e 8；//点线
//border-left: 2px虚线# e8e8e8//虚线
}。u点{
位置：绝对；
宽度：8px
高度：8px
边框：2px纯色@蓝色；
边界半径：50%;
}。你-内容{
位置：相对；
top:-6px；
左边距：25px
断字：断字；
行高：24px
}
}。最后一个。u形尾翼{
显示：无；
}
}
}
}
/风格
在要使用的页面引入：
时间轴：total dots= 5 :时间轴desc=时间轴desc /
从"@/组件/时间线"导入时间线
组件：{
时间表
}
时间线说明：["在所有人看来，这是一个错误，这一点必须得到解释。创建服务站点,创建服务站点,创建服务站点,创建服务站点]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。