这篇文章主要介绍了vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前言：参考文档文章
一、实现效果：
二、安装插件及依赖：
cnpm install -S vis-linetime cnpm install -S vis-data cnpm install -S moment
三、封装组件：
下端时间轴单独封装成组件
1.html部分：
2.引入依赖：
import { DataSet } from 'vis-data/peer' import { dateFormat } from '@/util' //封装的时间格式化函数，如下所示 import { Timeline } from 'vis-timeline/peer' import 'vis-timeline/styles/vis-timeline-graph2d.css' const moment = require('moment')时间格式化函数：
export function dateFormat(date, fmt) { //date是日期，fmt是格式 let o = { 'M+': date.getMonth() + 1, // 月份 'd+': date.getDate(), // 日 'H+': date.getHours(), // 小时 'h+': date.getHours(), // 小时 'm+': date.getMinutes(), // 分 's+': date.getSeconds(), // 秒 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 S: date.getMilliseconds() // 毫秒 } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) } } return fmt }3.父组件传入数据：
let props = defineProps({ ganntData: { // 初始传入数据 type: Object, default: () => {} }, ganntHistoryData: { // 全部的历史数据，为了实现撤销上一步 type: Object, default: () => {} } })4.js部分全部配置
配置项参考官方文档，仅注释解释个别方法。
四、父组件调用
1.引入子组件
// loading是为了有个加载效果，为了美观
import TimeLine from '@/components/modules/planControl/TimeLine'
2.初始数据
let props = defineProps({ // 因为这个父组件是通过点击进来的，所以有传入的数据，也可以直接赋值ganntData 数据，可以省略watch里面的转格式 conflictList: { type: Array, default: null } }) const ganntData = reactive([ { name: 'confilct', trackTimeWindows: [ ] } ]) const ganntHistoryData = ref([]) // 传入数据变化时为ganntData和ganntHistoryData赋值。 watch( () => props.conflictList, (newValue) => { ganntData[0].trackTimeWindows.length = 0 newValue.forEach(element => { ganntData[0].trackTimeWindows.push({ deviceId: element.content, timeWindows: [ { startTime: element.startTime, stopTime: element.stopTime } ] }) }) // 记录操作历史 ganntHistoryData.value.length = 0 ganntHistoryData.value.push(ganntData) }, { deep: true, immediate: true } ) 原数据（省略部分未使用参数）：
[ { "id": 1, "content": "xxxxxxxxxxxxxx计划1", "time": "2023.08~10", "startTime": "2023-08-09", "stopTime": "2023-10-20" }, { "id": 2, "content": "xxxxxxxxxxxxxx计划2", "time": "2023.09~11", "startTime": "2023-09-09", "stopTime": "2023-11-1" }, { "id": 3, "content": "xxxxxxxxxxxxxx计划3", "time": "2023.08~10", "startTime": "2023-08-20", "stopTime": "2023-10-1" } ]3.父组件按钮及事件
仅展示原始图、撤销事件。
原始图 撤销 一键调整 取消 保存并退出
回归原始图事件：
大致思路：先把ganntData清空，将拿到的props.conflictList里的数据赋值给ganntData，再把ganntData的数据push进ganntHistoryData中
// showResetTip 是显示一个“已回到初始状态”的提示框，可以自己封装或者使用组件，此处不展示 const showResetTip = ref(false) const loading = ref(false) const reset = () => { // loading是加载效果 loading.value = true ganntData[0].trackTimeWindows.length = 0 props.conflictList.forEach(element => { ganntData[0].trackTimeWindows.push({ deviceId: element.content, timeWindows: [ { startTime: element.startTime, stopTime: element.stopTime } ] }) }) showResetTip.value = true ganntHistoryData.value.splice(0) ganntHistoryData.value.push(ganntData) setTimeout(() => { showResetTip.value = false loading.value = false }, 1000) }撤销事件：
大致思路：拿到子组件返回的ganntHistoryData历史数据数组，删掉最后一组数据后：
如果历史数据数组的长度<= 1，代表再撤销就回到原始状态了，那就直接调用reset()回到原始图；
否则，将ganntHistoryData删掉最后一组数据后的ganntHistoryDataClone最后一组值赋给ganntData，
const preNode = () => { // loading是加载效果 loading.value = true let ganntHistoryDataClone = [] ganntHistoryDataClone = JSON.parse(JSON.stringify(ganntHistoryData.value)) ganntHistoryDataClone.splice(ganntHistoryDataClone.length - 1, 1) if (ganntHistoryDataClone.length <= 1) { reset() } else { ganntData[0] = ganntHistoryDataClone[ganntHistoryDataClone.length - 1][0] ganntHistoryData.value = JSON.parse(JSON.stringify(ganntHistoryDataClone)) } setTimeout(() => { loading.value = false }, 1000) }到此这篇关于vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化的文章就介绍到这了,更多相关vue3用vis绘制甘特图内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！
以上就是vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)的详细内容，更多请关注0133技术站其它相关文章！
