create-time-line

时间轴

下载该组件

npm install create-time-line

组件的使用

在main.js里引用该组件

import CreateTimeLine from "create-time-line";

Vue.use(CreateTimeLine);

使用组件

<template>
  <CreateTimeLine  @click="clickItem"  :timeLineList="timeLineList"></CreateTimeLine>
</template>

<!-- 数据格式 -->
data() {
    return {
      timeLineList: [{
        id: 1,
        timestamp: '2013-10-6',
        info: '入院',
        start: true,
        end: false,
      },{
        id: 2,
        timestamp: '2014-10-6',
        info: '入科'
      },
      {
        id: 3,
        timestamp: '2015-10-6',
        info: '换床'
      },{
        id: 4,
        timestamp: '2016-10-6',
        info: '出院',
        start: false,
        end: true,
      },{
        id: 5,
        timestamp: '2017-10-6',
        info: '入院',
        start: true,
        end: false,
      },{
        id: 6,
        timestamp: '2018-10-6',
        info: '换科'
      },{
        id: 7,
        timestamp: '2019-10-6',
        info: '出院',
        start: false,
        end: true,
      },{
        id: 8,
        timestamp: '2020-10-6',
        info: '入院',
        start: true,
        end: false,
      },
      {
        id: 9,
        timestamp: '2017-10-6',
        info: '入科'
      },{
        id: 10,
        timestamp: '2018-10-6',
        info: '换科'
      },{
        id: 11,
        timestamp: '2019-10-6',
        info: '换科'
      },{
        id: 12,
        timestamp: '2020-10-6',
        info: '出院',
        start: false,
        end: true,
      }],
    }
  }

  methods: {
    clickItem(item){
      console.log(item);
    }
  }

参数

参数 | 类型 | 默认值 | 说明 ---|---|---|--- id | String | id | 数据唯一字段 info | String | info | 需展示说明值字段 timestamp| String | timestamp | 展示数据底部字段 showNum | Number | 8 | 展示条数 selectIdValue | Number，String | -1（将选中最后一条数据）| 起始选中数据 timeLineList| Array | [] | 数据 click | function | | 点击回调函数

注： 需要标明区段必须给起始点数据加上start: true, 末尾点数据加上end: true;