X-Next

Appearance

TimeRangeSelector 时间范围选择 ​

用于在一天内选择一个或多个时间区间，适合排班、报表筛选和监控时间段配置。

基础用法 ​

08:00 - 12:00
14:00 - 18:00
0123456789101112131415161718192021222324
[
  [
    "08:00",
    "12:00"
  ],
  [
    "14:00",
    "18:00"
  ]
]
vue
<template>
  <x-time-range-selector v-model="ranges" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ranges = ref<[string, string][]>([
  ['08:00', '12:00'],
  ['14:00', '18:00'],
]);
</script>

禁用时间段 ​

07:00 - 11:00
15:00 - 19:00
0123456789101112131415161718192021222324
[
  [
    "07:00",
    "11:00"
  ],
  [
    "15:00",
    "19:00"
  ]
]
vue
<template>
  <x-time-range-selector
    v-model="ranges"
    :disabled-ranges="[['12:00', '13:00']]"
    :step-minutes="30"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ranges = ref<[string, string][]>([
  ['07:00', '11:00'],
  ['15:00', '19:00'],
]);
</script>

场景风格 ​

07:00 - 11:00
0123456789101112131415161718192021222324
08:30 - 12:30
14:00 - 18:00
0123456789101112131415161718192021222324
00:00 - 04:00
19:00 - 23:00
0123456789101112131415161718192021222324
09:00 - 13:00
15:00 - 19:00
0123456789101112131415161718192021222324
08:00 - 12:00
14:00 - 18:00
vue
<template>
  <x-time-range-selector
    v-model="defaultRanges"
    scene="default"
    :disabled-ranges="defaultDisabled"
  />
  <x-time-range-selector
    v-model="scheduleRanges"
    scene="schedule"
    :disabled-ranges="scheduleDisabled"
  />
  <x-time-range-selector
    v-model="monitorRanges"
    scene="monitor"
    :disabled-ranges="monitorDisabled"
  />
  <x-time-range-selector
    v-model="compactRanges"
    scene="compact"
    :disabled-ranges="compactDisabled"
  />
  <x-time-range-selector
    v-model="hiddenCursorRanges"
    scene="compact"
    :disabled-ranges="hiddenCursorDisabled"
    :show-cursor="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultRanges = ref<[string, string][]>([['07:00', '11:00']]);
const scheduleRanges = ref<[string, string][]>([
  ['08:30', '12:30'],
  ['14:00', '18:00'],
]);
const monitorRanges = ref<[string, string][]>([
  ['00:00', '04:00'],
  ['19:00', '23:00'],
]);
const compactRanges = ref<[string, string][]>([
  ['09:00', '13:00'],
  ['15:00', '19:00'],
]);
const hiddenCursorRanges = ref<[string, string][]>([
  ['08:00', '12:00'],
  ['14:00', '18:00'],
]);

const defaultDisabled = ref<[string, string][]>([['13:00', '15:00']]);
const scheduleDisabled = ref<[string, string][]>([['12:30', '14:00']]);
const monitorDisabled = ref<[string, string][]>([['04:00', '06:00']]);
const compactDisabled = ref<[string, string][]>([['13:00', '14:30']]);
const hiddenCursorDisabled = ref<[string, string][]>([['12:00', '13:00']]);
</script>

自定义颜色 ​

08:00 - 12:00
0123456789101112131415161718192021222324
09:00 - 13:00
0123456789101112131415161718192021222324
00:00 - 04:00
0123456789101112131415161718192021222324
15:00 - 19:00
vue
<template>
  <x-time-range-selector
    v-model="defaultRanges"
    color="#0f766e"
    :disabled-ranges="defaultDisabled"
  />
  <x-time-range-selector
    v-model="scheduleRanges"
    scene="schedule"
    color="#2563eb"
    :disabled-ranges="scheduleDisabled"
  />
  <x-time-range-selector
    v-model="monitorRanges"
    scene="monitor"
    color="#dc2626"
    :disabled-ranges="monitorDisabled"
  />
  <x-time-range-selector
    v-model="compactRanges"
    scene="compact"
    color="#16a34a"
    :disabled-ranges="compactDisabled"
    :show-cursor="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultRanges = ref<[string, string][]>([['08:00', '12:00']]);
const scheduleRanges = ref<[string, string][]>([['09:00', '13:00']]);
const monitorRanges = ref<[string, string][]>([['00:00', '04:00']]);
const compactRanges = ref<[string, string][]>([['15:00', '19:00']]);

const defaultDisabled = ref<[string, string][]>([['13:00', '15:00']]);
const scheduleDisabled = ref<[string, string][]>([['13:00', '14:30']]);
const monitorDisabled = ref<[string, string][]>([['04:00', '06:00']]);
const compactDisabled = ref<[string, string][]>([['12:00', '13:30']]);
</script>

更细的主题控制可以覆盖组件 CSS 变量。

vue
<template>
  <x-time-range-selector v-model="ranges" class="custom-time-range" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ranges = ref<[string, string][]>([
  ['08:00', '12:00'],
  ['15:00', '19:00'],
]);
</script>

<style scoped>
.custom-time-range {
  --x-time-range-selector-color: #0f766e;
  --x-time-range-selector-grid-radius: 8px;
  --x-time-range-selector-range-height: 34px;
  --x-time-range-selector-range-radius: 8px;
}
</style>

限制范围数量 ​

08:00 - 12:00
14:00 - 18:00
0123456789101112131415161718192021222324
[
  [
    "08:00",
    "12:00"
  ],
  [
    "14:00",
    "18:00"
  ]
]
vue
<template>
  <x-time-range-selector v-model="ranges" :max-ranges="3" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ranges = ref<[string, string][]>([
  ['08:00', '12:00'],
  ['14:00', '18:00'],
]);
</script>

允许重叠 ​

08:00 - 12:00
10:00 - 14:00
0123456789101112131415161718192021222324
[
  [
    "08:00",
    "12:00"
  ],
  [
    "10:00",
    "14:00"
  ]
]
vue
<template>
  <x-time-range-selector v-model="ranges" overlap-allowed />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ranges = ref<[string, string][]>([
  ['08:00', '12:00'],
  ['10:00', '14:00'],
]);
</script>

更细步长 ​

08:15 - 12:15
0123456789101112131415161718192021222324
[
  [
    "08:15",
    "12:15"
  ]
]
vue
<template>
  <x-time-range-selector v-model="ranges" :step-minutes="15" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const ranges = ref<[string, string][]>([
  ['08:15', '12:15'],
]);
</script>

按需导入 ​

ts
import { TimeRangeSelector } from 'x-next';

Props ​

参数说明类型默认值
modelValue时间范围数组[string, string][]必填
color组件主色，会写入 --x-time-range-selector-color 并派生轨道、选中段和手柄颜色stringundefined
scene场景风格，适配常规筛选、排班预约、监控时段和紧凑筛选'default' | 'schedule' | 'monitor' | 'compact''default'
showCursor是否显示下方 0-24 小时游标booleantrue
overlapAllowed是否允许时间段重叠booleanfalse
stepMinutes时间块步长，单位分钟；非法或不能整除 1440 时降级为 30number30
disabledRanges禁用时间范围[string, string][][]
maxRanges最多可创建范围数量numberInfinity

Events ​

事件名说明回调参数
update:modelValue时间范围提交后触发value

交互说明 ​

  • 在时间轴空白区域按下并拖动可创建范围。
  • 拖动范围主体可移动时间段，拖动过程中会保持原区间宽度。
  • 拖动左右边缘可调整开始和结束时间。
  • 双击已选范围可删除。
  • 当 overlapAllowed 为 false 时，组件会阻止创建或拖入重叠区间。
  • 禁用时间段不会被纳入最终值，拖拽靠近禁用时间段时会停在边界。