Timeline 时间轴
作者:互联网
Timeline 时间轴
Timeline 时间轴
可视化地呈现时间流信息。
基础用法可参照element官网
- 时间轴太长可鼠标滚动
<el-scrollbar wrapClass="scrollbar-wrap"
style="height: 10rem"
ref="scrollbarContainer">
<div>
// 时间轴代码可参考element官网
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:timestamp="activity.timestamp">
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
</el-scrollbar>
activities: [{
content: '支持使用图标支持使用图标支持使用图标支持使用图标',
timestamp: '2018-04-12 20:46',
size: 'normal',
}, {
content: '支持自定义颜色',
timestamp: '2018-04-03 20:46',
size: 'normal',
}]
/deep/ .el-scrollbar {
height: 90%;
.scrollbar-wrap {
overflow-x: hidden;
}
.el-scrollbar__bar {}
}
.el-timeline {
margin-left: 4.5rem;
.el-timeline-item__content {
margin-right: 0.8rem;
font-size: 8px;
}
/deep/ .el-timeline-item__timestamp.is-bottom {
position: absolute;
left: -120px;
top: -3px;
color: #FFFF00;
}
/deep/ .el-timeline {
padding-left: 150px;
}
}
图片可以滚动,未制作动图
标签:__,el,Timeline,content,时间轴,timeline,图标 来源: https://blog.csdn.net/qq_37770233/article/details/123072677