npm package: @riil-frontend/component-quick-time-range
Description: 快捷选择最近时间段
Latest version: 2.1.4

# 最近时间快捷选择器

quick-time-range

快捷选择最近时间段。
功能描述：

1. 支持初始化已选项，初始化自定时间段，自定义下拉选项。
2. 选择后返回秒单位的时间戳数组[startTime,endTime]；
3. 从常用时间切换到自定时间，会自动带入上次选择的常用时间段；
4. 日期组件点击确认才会触发 onChange,点空白处会撤销操作
5. 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 为保留字段，不可更改,但可以删除（没有自定义项）

```js
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 },
};
```