拖拽时间选择器

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小时 |