Schedule 时段选择

示例

名称	类型	默认值	描述
`selected`	`Object`	-	[^selected]
`hour-class`	`string	Array	Object
`disabled-date`	`function(number, number): boolean`	`() => false`	特定小时是否禁用。参数类型为 `(day: number, hour: number)`，分别表示一周的第几天（`0` 表示周日）及对应的小时数。
`shortcuts`	`Array`	`schedule.shortcuts`	[^shortcuts]
`shortcuts-display`	`string`	`'inline'`	快捷选择项的显示方式，支持 `inline` / `popup`，分别对应内联按钮组与下拉选择。
`statuses`	`Array<{label: string, value: string}>`	`schedule.statuses`	图例数据源。会为图例项目添加 `class` 值 `veui-schedule-legend-${value}`，`label` 则会显示为图例文本。
`disabled`	`boolean=`	`false`	是否为禁用状态。
`readonly`	`boolean=`	`false`	是否为只读状态。

^^^selected :::badges v-model :::

已选时段。类型为 Object<number, Array>。

键为一周的第几天，0 表示周日，与 Date.prototype.getDay() 返回值相同。值为每天被选取的时段，每个时段格式为 [start: number, end: number]，start 与 end 均为 0–23 的小时数。

+++数据样例

{
  1: [
    [9, 17]
  ],
  6: [
    [0, 2],
    [18, 20]
  ]
}

本例表示周一的 9:00–18:00 与周六的 0:00–3:00 和 18:00–21:00。结束时间表示的是时段最后一小时的开始时间。 +++ ^^^

^^^shortcuts 快捷选择选项列表。类型为 {label: string, selected: boolean | Array}。

label 为显示的提示文字。selected 表示预选择的时段，类型为数组时，格式与 selected 属性相同；值为 true 时等同于 [[0, 23]]。 ^^^

^^^slot-legend-label 每个图例的文本区域。

默认内容：每个图例状态 label 字段对应的文本内容。

+++作用域参数

另外，status 内对应图例状态对象中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。 ^^^

^^^slot-hour 每小时区域的内容。

默认内容：无。

+++作用域参数

^^^slot-label 已选时间段的区域。

默认内容：时段在 3 小时及以上时，显示时段范围 `${from}:00–${to + 1}:00`；选择全天的显示为“全天”；小于 3 小时无内容。

+++作用域参数

^^^slot-tooltip 光标移入每个小时格子的悬浮提示内容。

默认内容：当前小时格子的时间范围 `${hour}:00–${hour + 1}:00`。

+++作用域参数

名称	描述
`select`	[^event-select]

^^^event-select :::badges v-model :::

选中状态变化后触发，回调参数为 (value: Object)。value 类型与 selected 属性相同。 ^^^

配置项	类型	默认值	描述
`schedule.statuses`	Array<{name, label}>	见描述。	[^config-statuses]

^^^config-statuses 默认图例状态数组。数组项类型为 {name: string, label: string}，默认值为：

[
  { name: 'selected', label: '@@schedule.selectedRanges' },
  { name: 'available', label: '@@schedule.availableRanges' }
]

:::tip @@ 开头的值表示引用多语言配置中的相应字段。 ::: ^^^