vue时间选择组件,vue 时间控件
这篇文章主要为大家详细介绍了某视频剪辑软件时间线组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件时间线组件的具体实现代码，供大家参考，具体内容如下
效果
vue-时间线组件（时间轴组件)代码
模板
ul class=时间线包装
Li class= timeline-item v-for= t in timeline list :key= t . id
div class=时间线框
div class=out-circle
div class=圈内/div
/div
div class=长线/div
/div
div class=时间轴-内容
div class= timeline-date“{ t . date } }/div
div class= timeline-title " { t . title } }/div
div class= timeline-desc { { t . content } }/div
/div
/李
/ul
/模板
脚本类型=text/babel
从“vue”导入某视频剪辑软件
导出默认Vue.component(时间轴,{
名称："时间线",
道具：{
时间线列表：{
类型：数组，
默认值：()={
return []
}
}
}
})
/脚本
样式范围的语言=scss
ul.timeline-wrapper {
列表样式：无；
边距：0;
填充：0;
}
/* 时间线*/。时间线-项目{
位置：相对；时间轴-框{
文本对齐：居中；
位置：绝对；外圆{
宽度：16px
高度：16px
背景：rgba(14，116，218，0.1)；
box-shadow: 0px 4px 12px 0px rgba(0，0，0，0.1)；
/*不透明度：0.1;*/
边界半径：50%;
显示器：flex
对齐-项目：居中；圈内{
宽度：8px
高度：8px
边距：0自动；
背景：rgba(14，116，218，1)；
边界半径：50%;
box-shadow: 0px 4px 12px 0px rgba(0，0，0，0.1)；
}
}。长线{
宽度：2px
高度：98px
背景：rgba(14，116，218，1)；
box-shadow: 0px 4px 12px 0px rgba(0，0，0，0.1)；
不透明度：0.1;
左边距：8px
}
}。时间线-内容{
框大小：边框-框；
左边距：20px
高度：106像素
填充：0 0 0 20px
文本对齐：左对齐；
边距-底部：30px。时间线-标题{
字体大小：14px
断字：全断；
边距-底部：16px
颜色：# 333;
字体粗细：500;
/*显示：内嵌；*/
}。时间线-日期{
字体大小：16px
颜色：# 333;
字体粗细：500;
边距-底部：16px
}。时间轴-desc
字体大小：14px
颜色：# 999999;
}
}
}。时间轴项目：最后一个类型。时间线-内容{
边距-底部：0;
}
/风格
应用
//父组件引用
时间轴：timeline-list= Dongtai /timeline
//引入组件，记得组件路径要根据自己的来
从导入时间线./时间轴；
//在数据()返回的对象里声明数组
东台：[]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。