简介
时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类
在线演示及下载
在线演示:https://yelingfeng.github.io/vue-timelinepick/
本地下载
依赖
- jquery <=2.x
- d3 < 4.x
- createjs
- tweenMax
使用方法
引入依赖文件
import timelinepick from "vue-timelinepick"
import "vue-timelinepick/dist/vue-timelinepick.css"
Vue.use(timelinpick)
vue组件中直接使用
<timelinepick :option="op" :width="width" :height="height" :handler="changeAction"></timelinepick>
data() {
return {
"width": 1200,
"height":110,
"op" : {
"threshold": new Date(),
"number": 97,
"spanMinNumber": 10,
"isFixedDrag" : true,
"spanIndex": {start: 70, end: 97},
"type": "quarter",
"dateFormat" : ‘yyyy-MM-dd mm:hh:ss‘
}
}
},
methods:{
changeAction(e){
this.startTime = e.startTime;
this.endTime = e.endTime;
}
}
属性
属性 | 说明 |
---|---|
width | 宽 |
height | 高 |
option | 配置项 |
方法
属性 | 说明 |
---|---|
threshold | 起点时间(默认当前) new Date() |
number | 总刻度 97 |
isFixedDrag | 是否禁止拖拽 false |
spanIndex | 起始滑块范围 {start: 70, end: 97} |
type | 刻度类型 "quarter" |
dateFormat | 格式 ‘yyyy-MM-dd mm:hh:ss‘ |