@riil-frontend/component-quick-time-range
v2.1.4
Published
快捷选择最近时间段
Downloads
67
Readme
最近时间快捷选择器
quick-time-range
快捷选择最近时间段。 功能描述:
- 支持初始化已选项,初始化自定时间段,自定义下拉选项。
- 选择后返回秒单位的时间戳数组[startTime,endTime];
- 从常用时间切换到自定时间,会自动带入上次选择的常用时间段;
- 日期组件点击确认才会触发 onChange,点空白处会撤销操作
- onChange 回调参数中的 isDeff,可以判断出用户操作前后时间段是否发生了变化,便于自行处理业务逻辑。
API
QuickTimeRange
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---- | --------------------------------------------------------------------------------------------- | ------ | ---- |
| rangePickerProps | 透传 RangePicker 属性 | - | RangePicker.props | | |
| selectProps | 透传 Select 属性 | - | Select.props | | |
| defaultInterval | 初始化下拉选中项,此属性对应 option 中的 value 值 | - | string | | |
| defaultCustomTime | 初始化自定义时间选择段[startTime,endTime],秒为单位的时间戳. | - | [int,int] / null | | |
| selectOption | 自定义下拉项,数据结构同 OPTION。要求对象 Key 和属性 value 值保持一致,time 为秒级时间戳,CUSTOM 为保留字段,不可更改,但可以删除(没有自定义项)。<font color='red'>
<b>
当设置此属性,需同时设置 defaultInterval 为配置项数据中的默认选项 key 值 </b></font>
| - | object | | |
| onChange | 切换,选择日期后组件回调: rangeTime 组件返回选中时间段,[startTime,endTime],秒为单位的时间戳;isDiff 操作前和操作后,时间段是否不同; interval 下拉框所选项 key 值;customTime 日期选择组件所选值 [startTime,endTime],秒为单位的时间戳; | - | ({ rangeTime:[int,int], isDiff:boolean, interval:string, customTime:[int,int] })=>{} | | |
| current | 初始化当前时刻(秒为单位的时间戳)<font color='red'>
<b>
注意:若不设置此值,每次切换常用时间,都将使用最新本机时刻作为结束时间 </b></font>
| - | int | | |
| onInit | 初始化回调,参数返回 setValue 方法,用来手动改变选择器值.setValue(interval:下拉选择类型,pickerValue:rangePicker 的 value 值,格式为[moment,moment]) 注意,通过setValue设置的值,不会触发组件的onChange | - | (setValue:fun)=>{} ; setValue:(interval:OPTION.value,rangeTime:[start:moment,end:moment])=>{} | | |
OPTION
组件默认配置项,自定义下拉项,数据结构同 OPTION。要求对象 Key 和属性 value 值保持一致,time 为秒级时间戳,CUSTOM 为保留字段,不可更改,但可以删除(没有自定义项)
OPTION = {
HOUR1: { label: '最近1小时', value: 'HOUR1', time: 60 * 60 },
DAY1: { label: '最近1天', value: 'DAY1', time: 24 * 60 * 60 },
DAY7: { label: '最近7天', value: 'DAY7', time: 7 * 24 * 60 * 60 },
DAY30: { label: '最近30天', value: 'DAY30', time: 30 * 24 * 60 * 60 },
CUSTOM: { label: '自定义时间', value: 'CUSTOM', time: Infinity },
};