vue图片时间轴滑动_使用vue，来写个时间轴

功能

1.选择时间，获取对应数据，显示时间轴和时间点

2.时间点hover显示对应时间

3.整点时间显示

4.点击时间轴，选择对应的时间点

5.点击时间点，选择对应的时间点

6.拖动点，选择对应的时间点

7.限制拖动，及点击位置

效果图

组件代码

1.框架：vue+axios

2.日期组件：Ant Design of Vue(也可以自己修改成其他日期组件)

3.日期格式化：moment

安装:

npm i moment --save-dev

---------------------------------------

main.js引入:

//引入moment

import moment from 'moment'

import 'moment/locale/zh-cn'//中文

Vue.prototype.$moment = moment

---------------------------------------

vue文件中:

let createDate =this.$moment(value).format('YYYY/MM/DD');

4.数据返回格式

tips:数据返回为时间戳秒钟算，而不是毫秒，所以有些地方需要*1000计算

选择显示区间：

v-model="startValue"

format="YYYY-MM-DD"

placeholder="开始时间"

@openChange="handleStartOpenChange"

:disabled-date="disabledStartDate"

@change="changePicker"

size="large"

/>

v-model="endValue"

format="YYYY-MM-DD"

placeholder="结束时间"

:open="endOpen"

@openChange="handleEndOpenChange"

:disabled-date="disabledEndDate"

@change="changePicker"

size="large"

/>

{ {selTime}}

import {getBackupTimeline} from "@/plugins/axios";

export default {

name: "TimeLine",

data() {

return {

startValue: this.$moment().format("YYYY-MM-DD"),//开始时间---时间选择

endValue: this.$moment().format("YYYY-MM-DD"),//结束时间---时间选择

endOpen: false,

fullDate:null,//最初时间(最开始有数据的时候)

binlogDate:null,//binlog 结束时间

selTime:null,//选中时间

start_date:null,//开始时间戳

end_date:null,//结束时间戳

timeline:null,//选中时间戳

incre_dates:[],//备份点数组

allIncre:[],//备份点和binlog

showLine:false,//是否显示时间轴

dateTips:[],//0点，提示时间点数组

};

},

created(){

let today = new Date();

let forToday = this.$moment(today).subtract