@riil-frontend/component-time-line

这是一个时间胶囊组件

Usage no npm install needed!

<script type="module">
  import riilFrontendComponentTimeLine from 'https://cdn.skypack.dev/@riil-frontend/component-time-line';
</script>

README


order: 1

时间轴组件

@riil-frontend/component-time-line

这是一个时间胶囊组件

问题记录链接

https://doc.weixin.qq.com/txdoc/excel?docid=e2_ALAASAbRAHM9z3BLSAQRlOVrGxcnq&scode=AJIArwfLAAYlj7QjB9ALAASAbRAHM&type=1

API

参数名 说明 必填 类型 默认值 备注
data 时间胶囊一页的数据 array []
onSelectTime 点击已选择的色块
签名:
(time:Number,Item:object,data:Object)=>{}
入参:
time {Number} 当前选择的值
item {object} 当前选择的值val和状态state
data {array} 当前页时间轴的数据[{val,state}]
Function
onPageChange 点击进行色块分页
签名;
(startTime:Number,endTime:Number,type:left
right)=>{}
入参:
startTime {Number} 下一页的开始时间
endTime {Number} 下一页的结束时间
Function
onCurrentTime 点击当前按钮
签名:
()=>{}
Function
pageSize 每页色块数量 Number 60
interval 相邻色块的间隔 Number 60*1000 毫秒
disabledEndDate 选择框失禁的结束时间 Number
disabledStartDate 选择框失禁的开始时间 Number
selectedTime 当前选择的时间 Number
timeValue 当前日期选择框选择的时间 Number
stepLength 日期刻度步长 Number 5
showLeftScale 是否展示左侧的刻度 Boolean true
showRightScale 是否展示右侧的刻度 Boolean true
onChangeTime 日期选择框时间变化
签名:
(value:Moment)=>{}
入参 :
value {Moment} moment 对象
Function
disableLeftPage 是否失禁左分页按钮,设置此属性组件内部不控制分页按钮状态 Boolean -
disableRightPage 是否失禁右分页按钮,设置此属性组件内部不控制分页按钮状态 Boolean -
dateFormat 日期格式 String YYYY-MM-DD
timeFormat 时间格式 String HH:mm
onTimeOk 点击时间选择框确认按钮。
签名:
(time:Moment)=>{}
入参:
time {Moment} 点击确认时选择的时间
String