简介

ljs-s-timeline 蛇形时间轴。

快速开始

npm i ljs-s-timeline -S

快速应用

全局注入

import LjsTimelineS from 'ljs-s-timeline'
app.use(LjsTimelineS);

局部注入

import { LjsTimelineS } from 'ljs-s-timeline';
export default {
  name: 'App',
  components: {
    LjsTimelineS
  }
}

主参数

参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 ---- | ----- | ------ | ------ | ------ | :------ data | Array | √ | | | 数据。 rowNum | Number | × | 4 | | 每行显示几项。单位：px。 pointHeight | Number | × | 20 | | 点高度（宽高一致）。单位：px。 pointCenterHeight | Number | × | 12 | | 点内心高度（宽高一致）。单位：px。 pointRadius | String | × | 50% | | 点圆角。 pointColor | String | × | #999 | | 点颜色。 lineSize | String | × | 4 | | 线高度。单位：px。 lineColor | String | × | #CCC | | 线颜色。 lineEndLastShow | Boolean | × | true | | 线条末尾单数行是否有尾巴。false时lineEnd无效。 lineEnd | String | × | 0 | | 线条末尾的样式。 0 顶到头 1 末尾截断。 curveHeight | String | × | 100 | | 弯角宽度。 itemMarginLeft | String | × | 0 | | 项偏移。

data 参数

参数 | 类型 | 必填项 | 默认值 | 参考值 | 说明 ---- | ----- | ------ | ------ | ------ | :------ LJS_S_point_color | String | × | | red, #000000 | 点的颜色。不存在则使用 pointColor 值；如存在则使用 自身值。

示例

常规

<LjsTimelineS
  :data="data">
  <template #default="scope">
    <div class="name">{{ scope.row.label }}</div>
    <div class="date">{{ scope.row.date }}</div>
    <div class="content">{{ scope.row.content }}</div>
  </template>
</LjsTimelineS>