基于Vue的任务节点图绘制插件节点可拖拽多连线样式(vue-task-node)可用于机器学习,UML,及事物流程的绘制

80次阅读

共计 1324 个字符,预计需要花费 4 分钟才能阅读完成。

#vue-task-node

在线 Demo 1.0.x 版本 https://codesandbox.io/s/9413yop49r1.1.x 版本 https://codesandbox.io/s/2wv588orlrvue-task-node 是一个基于 Vue 的任务节点图绘制插件(vue-task-node is a Vue based task node mapping plug-in)此文章是续之前 1.0.x(https://segmentfault.com/a/11… 的更新版本

▲ 1.0.x -> 1.1.x
①重新组织了节点,使节点具有可扩展性。②新增节点可拖拽。③样式使用 less 编写,提高了后期样式的维护成本。④通过阅读 iview(https://github.com/iview/iview)及 element(https://github.com/ElemeFE/el…)的源码,目录结构,传参等都借鉴了其中的方法。
✉:liwenbingmsc@qq.com
一、安装
npm install vue-task-node -S
二、引入
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import Routers from ‘./router.js’;
import VueTaskNode from ‘vue-task-node’
import “vue-task-node/dist/css/vnode.css”

Vue.use(VueRouter);
Vue.use(VueTaskNode);

// The routing configuration
const RouterConfig = {
routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
el: ‘#app’,
router: router,
render: h => h(App)
});
三、教程
http://vidanao.com/vnode
四、版本

版本
说明
更新时间
是否支持拖拽
是否支持节点连线

1.0.0
开端, 根据数据绘制任务节点
2019 年 1 月 16 日

1.0.1
修改代码规范 Eslin
2019 年 1 月 17 日

1.0.2
调试入口文件
2019 年 1 月 17 日

1.0.3
npm 下载包错误修改
2019 年 1 月 17 日

1.0.4
添加鼠标右击后返回右击的 node 数据
2019 年 1 月 18 日

1.0.x
优化配置文件
2019 年 1 月 x 日

1.1.0
代码结构调整,组件重新封装,样式使用 less 写
2019 年 2 月 28 日

#
#
#
#
#

1.1.1
解决 dist 文件无法上传问题
2019 年 2 月 28 日

1.1.2
解决 dist 文件无法上传问题
2019 年 2 月 28 日

1.1.3
解决 index.js 找不到组件问题
2019 年 2 月 28 日

1.1.4
解决 index.js 找不到组件问题
2019 年 2 月 28 日

1.1.5
调整工作区样式问题
2019 年 3 月 1 日

1.1.6
调整节点的事件传递
2019 年 3 月 1 日

1.1.x
优化样式,及配置文件
2019 年 3 月 x 日

未来版本
说明
更新时间
是否支持拖拽
是否支持节点连线

1.2.x
新增节点间连线
2019 年 4 月 x 日

正文完
 0