【效果图】
【如何使用】
npm install vue-time-slider
// 在 main.js 中
import TimeSlider from "vue-time-slider"
import "vue-time-slider/dist/timeslider.css"
Vue.use(TimeSlider)
时间轴组件
在产品经理需求下，并没有找到满足需求的时间轴控制组件。遂快速写了个组件，即时间范围时间轴。
在写时间范围时间轴时，仅仅预留了部分可配置信息，导致接下来项目中，时间轴选用了 时间点来控制时，需要进行一波更改。所以打算重新整理下现有的时间轴，然后提供多一点的配置，可选时间轴的类型。
时间范围 、 时间点 、 时间范围点
传递参数的定义：
- range: Array required 时间轴整体范围
- show-stops: Boolean 是否将时间轴均分并显示stop
- step：Number 秒为单位 / Array 均分的间隔 [ 1, "d" ], [ 1, "h" ] 仅支持m，h，d 默认根据range确认 （小于1小时则按照分钟，小于1天则按照2小时, 大于1天则按照天）
- disabled: Boolean 是否禁止操作
- show-tooltip: Boolean 是否显示选择点/选择范围点上的tooltip
- format-tooltip: "YYYY/MM/DD HH:mm:ss"
- marks: Array { value: ts, label: "" }
- show-stops-label: Boolean 是否显示 stops上的label
- stops-format-label: "YYYY/MM/DD HH:mm:ss" 格式化 stops上的label
- selectRange: Array 选中的时间范围
- selectTime: Number 选中的时间
- show-select-time-icon: Boolean 是否显示选中时间的icon
- changeSelectRange事件 选中范围更改
- changeSelectTime事件 选中时间更改
- is-local: 是否使用本地时间 【可以考虑是否是直接和disabeld 采用同一种方式】
- tooltip-effect: 使用element toolitp的主题
- max-select-range: 可选择的最大时间范围
补充:
默认 当点击时是 显示 tooltip
当使用 show-select-time-icon 则取消原有的模式
当范围选择 和 选择点 同时存在时， 若最小值 > 当前值 则当前值 = 最小值，若最大值 < 当前值 则 当前值 = 最大值
当在时间轴上（非范围选择轴的地方）/ 每个间隔点上 点击时：满足就近原则
[ 就近原则 ]：
- 只有点选择时， 直接移动currentValue，
- 只有范围选择时， 判断当前选择点的时间 与 最大最小值的 差值，将差值小的点 更改为当前选择点
- 当 点选则 和 范围选择 同时存在时，如果 当前选择点 不在 范围原则内 则依照2规则 更改， 若在范围选择内 则按1 更改