vue-cli3.0移动端使用的时间轴效果

前言：

        我们使用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