Nupital Pomp Mesmerises

    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

    Install

    npm i timeline-vue-component

    DownloadsWeekly Downloads

    0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • bigang.ybg