时间范围选择(扩展)
使用el-date-picker组件封装,用于实现天、周、月、季度、年等不同时间单位的时间范围选择功能。基于时间范围选择器编辑器进行扩展,编辑器样式代码名称为:SWITCHUNIT
示例效果
输入参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 编辑器值,该值用于表示时间范围信息,包含几个关键属性:unit(时间单位)、type(类型,可选值为 'DYNAMIC'(动态时间)和 'STATIC'(固定时间))、start(开始时间)、end(结束时间) | {type: Object as PropType<{unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR';type: 'DYNAMIC' | 'STATIC';start: string | number;end: string | number;}>} | - |
| controller | 编辑器控制器对象 | new RequiredProp(Object as PropType<C>) | - |
| data | 容器数据,通常为表单数据,表格行数据,面板数据 | new RequiredProp(Object as PropType<IData>) | - |
| disabled | 是否禁用 | { type: Boolean } | false |
| readonly | 是否只读 | { type: Boolean, default: false } | false |
| controlParams | 容器控件参数,一般是指表单部件控件参数、表格控件参数、面板控件参数 | { type: Object, required: false } | - |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 值变更事件。_value用于表示时间范围信息,包含几个关键属性:unit(时间单位)、type(类型,可选值为 'DYNAMIC'(动态时间)和 'STATIC'(固定时间))、start(开始时间)、end(结束时间) | {_value:{unit: 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR';type: 'DYNAMIC' | 'STATIC';start: string | number;end: string | number;}, _name?:string, _ignore?:boolean} |
编辑器参数
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| switchunit | 是否显示时间单位选择功能组件,该组件主要用于切换时间单位,根据不同的时间单位抛出不同的开始与结束时间值 | boolean | true |
| defaultunit | 默认时间单位,配置不同时间单位将展示对应的时间选择组件 | 'DAY' | 'WEEK' | 'MONTH' | 'QUARTER' | 'YEAR' | 'DAY' |
| emitmode | 抛值模式。当参数值为 'DEFAULT' 且时间单位为 'DAY' 时,若当前时间为 '2025/04/23',开始时间为 '2025/04/22'、结束时间为 '2025/04/24',此时若时间类型为固定时间,将开始与结束时间的时间戳除以 1000 后按 {start:1745251200,end:1745510399,unit:'DAY',type:'STATIC'} 格式抛值,若为动态时间则按 {start:-1,end:1,unit:'DAY',type:'DYNAMIC'} 格式抛值,以当前时间与开始、结束时间的时间间隔体现;而当参数值为 'TIME' 时,将开始与结束时间按本地时间格式转换为字符串,按 {start:'2025/4/22 00:00:00',end:'2025/4/24 23:59:59',unit:'DAY',type:'STATIC'} 格式抛值 | 'DEFAULT' | 'TIME' | 'DEFAULT' |