1.0.12 • Published 5 months ago
drag-time-picker-vue2 v1.0.12
拖拽时间选择器
Attributes
| 参数 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| value / v-model | 绑定值 | IValue | 必填值 | |
| range | 时间范围 | 24 | 48 | 24 | 24 代表 24 小时，也就是 1 天（当前仅支持 24 或 48） |
| disabled | 禁用 | boolean | false | 值为 true 则不可选择时间 |
| step | 步长 | number | 30 | 30 分钟，每个小时会被分割为 2 格（60 / step） |
| needPeriod | 控制时间段区显隐 | boolean | false | 时间段区可通过点击快速选中常规时段可选值参考ITimePeriod |
| periodList | 自定义时间段 | IPeriodList | 如上图 | 自定义时间段的区间根据 timePeriod 字段去计算格数所以必须是00:00~24:00的字符串形式 |
type IValue = Array<{
startTime: string;
endTime: string;
}>;
type ITimePeriod = {
timePeriod: string; // "00:00~24:00"
label: string; // "全天" "早餐" "午高峰" "下午茶" "晚高峰" "夜宵1" "夜宵2"
key: string; // "allDay"
selected: boolean; // false
};
type IPeriodList = Array<ITimePeriod>;Events
| 事件名称 | 说明 | 回调参数 | 备注 |
|---|---|---|---|
| change | 值变化时触发 | (Value: IValue) | |
| custom-time-period-change | 点击时间段区的按钮时触发 | (Value: ITimePeriod) | |
| on-clear | 点击清空选择时触发 | ||
| on-error | 错误回调函数 | (errMsg: string) | 触发内部错误规则，比如选择时间不能超过24小时 |