timeline-vue-component

时间轴组件

Features

• 支持懒加载和分页
• 数据来源支持前端纯静态、异步接口获取
• slot 定制内容显示
• 支持布局和样式定制

Installation

npm install timeline-vue-component --save

Usages

import Timeline from 'timeline-vue-component';

Vue.component('timeline', Timeline);

<!--数据来源为前端静态数据-->

<timeline
  paginationType="frontend"
  :timelineData="data"
  :pageSize="10"
  :spacing="180">
  <!--开始图标内定制符号，选传-->
  <template slot="startCircle">
    <i class="el-icon-arrow-up"></i>
  </template>
  <!--结尾图标内定制符号，选传-->
  <template slot="endCircle">
    <i class="el-icon-arrow-down"></i>
  </template>
  <!--内容按需定制布局和数据排版，必传-->
  <template slot="list" scope="scope">
    {{ scope.data }}
  </template>
</timeline>

<!--数据来源为异步接口数据-->
<!--组件内点下一步触发事件，onFetchRemoteData回调函数第一个参数 page => {current,size}，同步父组件分页值-->

<timeline
  paginationType="remote"
  :timelineData="data"
  :pageSize="10"
  @fetch-remote="onFetchRemoteData"
  :spacing="180">
  <!--开始图标内定制符号，选传-->
  <template slot="startCircle">
    <i class="el-icon-arrow-up"></i>
  </template>
  <!--结尾图标内定制符号，选传-->
  <template slot="endCircle">
    <i class="el-icon-arrow-down"></i>
  </template>
  <!--内容按需定制布局和数据排版，必传-->
  <template slot="list" scope="scope">
    {{ scope.data }}
  </template>
</timeline>

时间轴数据格式

// :timelineData="data"
data: [
  { // 通过 scope 接收
    groupTile: '分组标题',
    title: '标题',
    content: [
      {
        field: '自定义内容',
      }
    ]
  },
]

API

config

参数名 | 类型 | 默认值 | 备注 ------------ | ------------- | ------------ | --------- paginationType | String | - | 数据来源类型 frontend、remote（必填） timelineData | Array | - | 时间轴数据（必填） pageSize | Number | - | 分页 （选填） spacing | Number | - | 时间轴左边和右边的间距 （选填） titleWidth | Number | - | 标题的宽度 （选填） circleWidth | Number | - | 中间节点（时间轴上的圆点）宽高 （选填） startCircleWidth | Number | - | 时间轴上开始和结束节点的宽高 （选填）

Issues

Submit the issues if you find any bug or have any suggestion.

Contribution

Fork the repository and submit pull requests.

Release Notes

see CHANGELOG

License