Schedule 时段选择

示例

0:00
2:00
4:00
6:00
8:00
10:00
12:00
14:00
16:00
18:00
20:00
22:00
24:00
9:00–12:00 13:00–18:00
13:00–17:00
全天 
<template>
<article>
  <veui-schedule
    v-model="selected"
    :shortcuts="shortcuts"
    shortcuts-display="popup"
    :statuses="statuses"
  />
</article>
</template>

<script>
import { Schedule } from 'veui'

export default {
  components: {
    'veui-schedule': Schedule
  },
  data () {
    return {
      selected: {
        0: [[0, 23]],
        1: [[9, 11], [13, 17]],
        3: [[13, 16]],
        5: [[9, 9], [16, 17]]
      },
      shortcuts: [
        {
          label: 'Entire week',
          selected: {
            0: true,
            1: true,
            2: true,
            3: true,
            4: true,
            5: true,
            6: true
          }
        },
        {
          label: 'Weekdays',
          selected: {
            1: true,
            2: true,
            3: true,
            4: true,
            5: true
          }
        },
        {
          label: 'Weekends',
          selected: {
            0: true,
            6: true
          }
        }
      ],
      statuses: [
        {
          label: 'Selected',
          name: 'selected'
        },
        {
          label: 'Available',
          name: 'available'
        }
      ]
    }
  }
}
</script>

API

属性

名称类型默认值描述
selectedObject-

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。结束时间表示的是时段最后一小时的开始时间。

hour-classstring|Array|Object|function{}特定小时的自定义 HTML class。传非函数时，数据格式为所有 Vue 支持的 class 表达式；传函数时，签名为 function(day: number, hour: number): string|Array<string>|Object<string, boolean>，返回值格式亦为所有 Vue 支持的 class 表达式。
disabled-datefunction(number, number): boolean() => false特定小时是否禁用。参数类型为 (day: number, hour: number)，分别表示一周的第几天（0 表示周日）及对应的小时数。
shortcutsArrayschedule.shortcuts

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

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

shortcuts-displaystring'inline'快捷选择项的显示方式，支持 inline/popup，分别对应内联按钮组与下拉选择。
statusesArray<{label: string, value: string}>schedule.statuses图例数据源。会为图例项目添加 class 值 `veui-schedule-legend-${value}`，label 则会显示为图例文本。
disabledbooleanfalse是否为禁用状态。
readonlybooleanfalse是否为只读状态。

插槽

名称描述
header顶部区域。
header-content顶部区域的内容，不包括外层容器。
shortcuts顶部快捷选项区域。
legend顶部图例区域。

作用域插槽

名称描述
legend-label

每个图例的文本区域。

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

名称类型描述
labelstring图例状态的文字说明。
valuestring图例状态对应的值。

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

hour

每小时区域的内容。

默认内容：无。

名称类型描述
daynumber一周的第几天，0 表示周日。
hournumber小时序号。
label

已选时间段的区域。

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

名称类型描述
fromnumber时段开始的小时。
tonumber时段结束的小时。
tooltip

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

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

名称类型描述
daynumber一周的第几天，0 表示周日。
hournumber小时序号。

事件

名称描述
select

v-model

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

全局配置

配置项类型默认值描述
schedule.statusesArray<{name, label}>见描述。

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

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

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