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

---