vue实现的Timeline 时间线组件——仿照elementui

1. 样式如下：
   
   代码如下：

<template><ul class="timeline" ><li class="timeline-item" v-for="item in activities" :key="item.index"><div class="item-tail"></div><div class="item-node"></div><div class="item-wrapper"><div class="item-content">系统通知,流程</div><div class="item-time" ref="time">时间：{{ item.timestamp }}</div><div class="item-process">节点：{{ item.process }}</div><div class="item-result">结果：{{ item.result }}</div></div></li></ul>
</template>
<script>
import { reactive } from "vue";export default {setup() {const activities = reactive([{content: "活动开始",timestamp: "2018-04-15",process: "已发送",result: "无",},{content: "通过审核",timestamp: "2018-04-13",process: "已审核",result: "无",},{content: "创建成功",timestamp: "2018-04-11",process: "结束",result: "无",},]);return { activities };},
};
</script><style scoped lang='less'>
.timeline {margin: 0;font-size: 14px;list-style: none;background-color: #fff;margin: 20px;.timeline-item {position: relative;padding-bottom: 20px;.item-tail {position: absolute;left: 4px;height: 100%;border-left: 2px solid #e4e7ed;}.item-node {left: -2px;width: 10px;height: 10px;position: absolute;background-color: #fff;border: 2px solid #ccc;border-radius: 50%;display: flex;justify-content: center;align-items: center;}.item-wrapper {position: relative;padding-left: 28px;top: -3px;.item-content {color: #6395f8;}.item-time {margin-top: 8px;color: #909399;line-height: 1;font-size: 13px;}.item-process {margin-top: 8px;}.item-result {margin-top: 8px;}}}
}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！