前言：
我们使用element或者iview时会发现框架中就有时间轴的效果，但是我在mint-ui中是没有找到该效果，但是实际项目又是需要，所以引入了一个时间轴插件vue-cute-timeline，在这里记录一下
实现效果：
步骤：
第一：下载插件
npm i vue-cute-timeline
第二：timeline.vue组件
<template>
<ul class="timeLineDiv">
<timeline v-if="isTitAnCon">
<div
v-for="(page, index) in pages"
:key="index"
>
<timeline-title>{{index}}</timeline-title>
<timeline-item :hollow="true"
v-for="(article, index) in page"
:key="index"
>
<h4>{{article.title}}</h4>
<span>{{article.createDate}}</span>
</timeline-item>
</div>
</timeline>
<timeline class="timeLineT" v-if="!isTitAnCon">
<timeline-item :hollow="params.hollow" v-for="(item,i) in pages" :key="i">
<p class="time">2019</p>
<h4>
每日答题
<p>+<span>4</span>分</p>
</h4>
</timeline-item>
</timeline>
</ul>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'
export default {
props: {
/**
* 是否为带头部+主体内容,
* tableData:[
{createDate:'2018-03-24 14:01:11',title:'xxxx'},
{createDate:'2019-03-14 14:01:11',title:'xxxx'},
{createDate:'2018-07-24 14:01:11',title:'xxxx'},
{createDate:'2019-02-14 14:01:11',title:'xxxx'},
{createDate:'2018-01-24 14:01:11',title:'xxxx'}
],
*/
isTitAnCon:{
type:Boolean,
default:false
},
/**
* 传来的数据
*/
list:Array,
},
data () {
return {
pages:[{createDate:'2018-03-24 14:01:11',title:'xxxx'},
{createDate:'2019-03-14 14:01:11',title:'xxxx'},
{createDate:'2018-07-24 14:01:11',title:'xxxx'},
{createDate:'2019-02-14 14:01:11',title:'xxxx'},
{createDate:'2018-01-24 14:01:11',title:'xxxx'}],//处理后的时间轴数据
params:{
hollow:false,
}
};
},
components: {
Timeline,
TimelineItem,
TimelineTitle
},
computed: {},
mounted() {
if(this.isTitAnCon){
this.getNowData();
}
},
methods: {
/**
* 对数据进行二次处理,是格式变成
* 2018
* 2018的数据，
* 2019
* 2019的数据
*/
getNowData(){
let pages = {}//处理后的数据
this.list.forEach(table => {
let date = table.createDate.substring(0,19);
date = date.replace(/-/g,'/');
let timestamp = new Date(date).getTime();
let d = new Date(timestamp)
let year = d.getFullYear() //获取年份
if(pages[year]){//根据年份分组
pages[year].push(table)
}else {
pages[year] = [table]
}
})
this.pages = pages;
}
},
watch: {}
}
</script>
<style lang='less' scoped>
.timeLineT{
.time{
height:32px;
font-size:28px;
font-weight:400;
color:#999;
line-height:32px;
margin-bottom:9px;
}
h4{
display: flex;
justify-content: space-between;
height:42px;
font-size:30px;
line-height:42px;
color:#333;
p{
font-size:30px;
font-weight:500;
color:#FF3000;
}
}
}
.timeline-item{
border-bottom: 0;
}
</style>
第三：调用方法：
template部分:
<!-- 时间轴 -->
<timeline class="timeline"></timeline>
js部分:
import timeline from '@/components/common/timeline' //时间轴
components: {
timeline
},
更多资料：
https://www.ctolib.com/luyilin-vue-cute-timeline.html
