共计 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 日
是
是