Time Range Slider

该组件可以让用户在一个有限的时间范围内，非常方便地选取一个时间区间；基于 Vue 3 开发。

使用

安装：

# npm
npm install vue3-time-range-slider
# pnpm
pnpm install vue3-time-range-slider
# yarn
yarn add vue3-time-range-slider

使用：

<template>
    <TimeRangeSlider v-model="sliderValue" :max="max" :min="min" step="minute" :limit="limit" />
</template>
<script lang="ts" setup>
import TimeRangeSlider from 'vue3-time-range-slider'
import 'vue3-time-range-slider/style.css'

const min = new Date(2023, 0, 1, 8, 0) // 2023-01-01 08:00
const max = new Date(2023, 0, 31, 17, 59) // 2023-01-31 17:59
const limit = 7 * 24 * 60 * 60 * 1000 // 7 days

const sliderValue = ref<[Date, Date] | undefined>(undefined)
</script>

属性

| 属性 | 描述 | 类型 | 默认值 | | ---------- | ------------------------------------------ | ----------------------------------------------------- | ---------- | | modelValue | 用户所选取的时间区间 | undefined \| [Date \| undefined, Date \| undefined] | - | | step | 时间粒度 | 'second' \| 'minute' \| 'hour' | 'second' | | min | 时间选取范围的起始值 | Date | - | | max | 时间选取范围的结止值 | Date | - | | limit | 用户可选取的时间区间的最大长度，单位：毫秒 | number | - |

事件

| 事件 | 描述 | 参数 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- | | update:modelValue | 当用户选取（或输入）一个时间区间后，将会触发该事件 | ( value: [Date, Date] \| [] ) | | change | 同 update:modelValue 事件 | ( value: [Date, Date] \| [] ) | | startPicking | 当用户开始选取时间时，将触发该事件 | - | | picking | 当用户选取时间时，将触发该事件（该事件会在 startPicking 触发后及 endPicking 触发前立即触发一次，而在这之间则会跟随用户的鼠标移动等操作触发多次） | - | | endPicking | 当用户选取完一个时间区间后，将触发该事件 | - |

时间区间

在该组件中，「时间区间」被认为是一个相对于 step 的闭区间，比如当 step 为 hour 时，下面这个区间值：

[2022-01-01 00:00:00, 2022-01-01 12:00:00]

表示是「2022 年 1 月 1 日」这一天中的从「0 点」到「12 点」这共计 13 个小时的时间。

而：

[2022-01-01 00:23:30, 2022-01-01 12:59:59]

则与上例一样，同样表示的是「2022 年 1 月 1 日」这一天中的从「0 点」到「12 点」这共计 13 个小时的时间。

至于：

[2022-01-01 00:00:00, 2022-01-01 00:00:00]

则表示的是「0 点」这一个小时的时间。

注意

首先，该组件只能让用户在一个有限的时间范围内进行选择，且时间范围不应太长（尽量在三个月内，若需要更长时间，可以提 Issue 或 PR）。

另外，允许用户可选取的时间区间的最大长度不应太长，尽量确保最大长度（通常是天数）不超过面板视口能够完整显示的天数。

最后，组件的宽高度最好设为 735 x 350，可在此基础上适当缩减，但最好不好缩减太多。