timeline-vue-component

2.0.0 • Public • Published

timeline-vue-component

Travis npm npm

时间轴组件

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


npm

Readme

Keywords

Package Sidebar

Install

npm i timeline-vue-component

Weekly Downloads

1

Version

2.0.0

License

MIT

Unpacked Size

13.5 kB

Total Files

10

Last publish

Collaborators

  • bigang.ybg