码迷,mamicode.com
首页 > 其他好文 > 详细

企业级时间轴插件Vue-timelinepick

时间:2017-12-30 15:59:47      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:引入   滑块   本地   blog   category   his   2.x   width   cti   

简介

时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类

在线演示及下载

在线演示: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‘

更多插件

企业级时间轴插件Vue-timelinepick

标签:引入   滑块   本地   blog   category   his   2.x   width   cti   

原文地址:https://www.cnblogs.com/wwhhq/p/8149947.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!