用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴

项目上有个时间轴功能，我看了一下element上有时间轴功能，不过有点太简单，我想改造一下这个时间轴，记录一下，用Timeline 时间线和 Collapse 折叠面板，两个加起来做了一时间轴，当是长篇短文时，插入Collapse 折叠面板，这样就可以折叠，当你点击别的折叠时，当前的打开状态就会折叠，这样也不会占用太多空间，当是短文是没有折叠，标题下面就内容，还有可以优化的地方，但是做到这里可以满足我们项目的需要，今天把它发布出来，可以为大家作参考。

<template><div class="timedialog"><el-timeline style="width:45%;"><el-timeline-item v-for="(item,index) in timelinedata" :key="index" placement="left" :type="'0'+item.important":color="color"><span v-if="item.important == 1"><span>{{item.versionTimestamp}}</span><h4>{{item.versionTitle}}<span class="change" v-if="item.currentVersion == 0">最新短文</span></h4><div class="timeLineInt"><el-card><div>{{item.versionContent}}</div></el-card></div></span><span v-if="item.important == 0"><span>{{item.versionTimestamp}}</span><el-collapse v-model="activeName" accordion><el-collapse-item><h5 slot="title" >{{item.versionTitle}}<span class="change" v-if="item.currentVersion == 0">最新短文</span></h5><el-card><div>{{item.versionContent}}</div></el-card></el-collapse-item></el-collapse></span></el-timeline-item></el-timeline></div>
</template>
<script>export default {data() {return {color:'#3378df',timelinedata:[],activeName:""}},created() {this.timeLineData()},methods: {timeLineData() {// this.timelinedata =[],var dataArray = [{important: 0,currentVersion:0,versionContent: "寂静的森林里，树木窃窃私语，萤火虫的光不再温暖。鹅卵石铺就的小路上布满了多少人的脚印？我在这里轻轻吟颂着温暖的童话。",versionTimestamp: "2022-05-04",versionTitle: "长篇短文",},{important: 1,currentVersion:1,versionContent: "山谷里的声音，让痛苦云淡风清，我聆听着古老的篇章，尘封的记忆在苏醒，漫延的泪水变成故事里的曾经。",versionTimestamp: "2022-04-15",versionTitle: "短文",},{important: 0,currentVersion:1,versionContent: "冰冷的城墙述说着一个又一个故事，湛蓝的大海是人鱼的眼泪，透明的水晶棺是公主的幸福笑靥，梦幻的蔷薇花翩飞，我的童话又在哪里？",versionTimestamp: "2022-03-01",versionTitle: "长篇短文",},{important: 1,currentVersion:1,versionContent: "带着怀表的兔子发着光，领着美丽的爱丽丝，进入神秘的扑克牌仙境，奇妙的经历只是一个梦而已，一切都会结束。",versionTimestamp: "2022-02-04",versionTitle: "短文",}]this.timelinedata = dataArray},}}
</script>
<style>
* {margin: 0;padding: 0;
}
</style>
<style scoped>
.el-timeline-item >>> .el-timeline-item__node--normal{left:120px;
}
.el-timeline-item >>> .el-timeline-item__tail{left:125px;
}
h4{position: absolute;top:0px;left:148px;font-size: 14px;font-family:"Microsoft Yahei";
}
h5{font-size: 14px;font-weight: normal;font-family:"Microsoft Yahei";
}
.el-timeline-item >>> .timeLineInt{margin-left: 119px;
}
.timedialog >>> .el-dialog__header {padding: 10px 20px;height: 25px;line-height: 25px;text-align: left;background: #fff;border-bottom: solid 1px #e4e7ed;
}
.timedialog >>> .timeLineInt{margin-top: 15px;
}
.timedialog >>> .el-card__body{padding: 8px;
}
.timedialog >>> .el-card.is-always-shadow{box-shadow:none;
}
.timedialog >>> .el-dialog__headerbtn .el-dialog__close {color: #666;
}
.timedialog >>> .el-dialog__headerbtn:hover .el-dialog__close {color: #666;
}
.timedialog >>> .el-dialog__headerbtn {top: 14px;
}
.timedialog >>>.el-collapse{margin-left: 119px;border:none;margin-top: -22px;
}
.timedialog >>>.el-collapse-item__header{border:none;line-height: 25px;height: 25px;
}
.timedialog >>> .el-collapse-item__wrap{border:none;
}
.timedialog >>> .el-collapse-item__content{margin-top: 15px;  padding-bottom: 0px  !important;
}
.timedialog >>> .el-timeline-item__node--01{width: 18px !important;height: 18px !important;left:117px !important;
}
.change{padding:3px 8px;background: #339933;color:#fff;border-radius: 5px;
}
</style>
<style>
.timedialog .el-dialog {margin: 0 auto !important;max-height: 90%;overflow: hidden;top: 5%;
}
.timedialog .abow_dialog {justify-content: center;align-items: Center;overflow: hidden;
}
.timedialog .el-dialog {margin: 0 auto !important;height: 65%;overflow: hidden;top: 10%;
}
.timedialog .el-dialog__body {position: absolute;left: 0;top: 46px;bottom: 0px;right: 0;padding: 0;z-index: 1;overflow: hidden;overflow-y: auto;padding: 10px 20px 0 0;
}
</style>

用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴相关推荐

element-plus 组件解析 - Collapse 折叠面板
element-plus 组件解析 - Collapse 折叠面板 1, 组件介绍 2,组件组成 3,组件实现 3.1,el-collapse 1,v-model="activeNames& ...
微信小程序Timeline时间线效果实现
微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本 wxml代码: <view class="box"><view wx:for= ...
微信小程序Timeline 时间线
微信小程序Timeline 时间线仿ElementUI的Timeline 时间线,自适应页面与文本效果图: wxml代码: <view class="status-alarm&qu ...
Streamline(流线)，Pathline(迹线)，Streakline(脉线) and Timeline(时间线)
流线.迹线.脉线和时间线可以用来描述和可视化流动,它们的定义如下: 1.流线流线是在给定时刻,画出的流线与流动中每一点的速度矢量相切,这是理解流动的有力工具. 2.迹线迹线是由一个给定的粒子所描出 ...
Timeline 时间线基础用法
1.html内容 Timeline 可拆分成多个按照时间戳排列的活动, 时间戳是其区分于其他控件的重要特征 <el-timeline style="flex: 1; overflow ...
什么是 Hudi Timeline (时间线)
Timeline 不同时刻对表的所有操作都被 Hudi 维护在一条时间线上,这有助于提供表的瞬时的视图查询,同时还能根据数据的到达顺序支持高校的数据检索服务.Hudi instant 核心概念包含以下 ...
手动封装一个timeLine时间线，点击有动态效果
html部分 <div id="time-line"><divclass="item"v-for="(item, index) in ...
Timeline 时间线数据处理
在根据年份将数据分组然后在时间线上展示,前端将如何处理数据呢. 原始数据格式 [{createDate:'2018-03-24 14:01:11',title:'xxxx'},{createDate: ...
wps怎么做时间线_ 在家办公总是做不好时间管理怎么办？学会加减乘除轻松搞定...
本文作者:以书为静(秋叶书友会共读计划第12期) 推荐编辑:米勒不知道你有没有遇到过类似情况: "正在写工作汇报的你,突然手机上跳出了一条"现男友"上热搜的消息,于是你 ...

用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴

用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴相关推荐

最新文章

热门文章

用timeline 时间线 和 Collapse 折叠面板做一个简单的时间轴

用timeline 时间线 和 Collapse 折叠面板做一个简单的时间轴相关推荐

最新文章

热门文章

用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴

用timeline 时间线和 Collapse 折叠面板做一个简单的时间轴相关推荐