企业级时间轴插件Vue-timelinepick

简介时间范围选择插件取当前时间之前一段时间范围按刻，小时，天分类在线演示及下载在线演示:https://yelingfeng.github.io/vue-timelinepick/本地下载依赖jquery import timelinepick from "vue-timelinepick"import "vue-timelinepick/dist/vue-timelinepick.cs

前端库

11600人浏览 · 2017-12-30 14:53:11

前端库 · 2017-12-30 14:53:11 发布

简介

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

在线演示及下载

在线演示:https://yelingfeng.github.io/vue-timelinepick/
本地下载

依赖

jquery

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^