4

#vue-task-node

clipboard.png

在线Demo

1.0.x 版本 https://codesandbox.io/s/9413yop49r
1.1.x 版本 https://codesandbox.io/s/2wv588orlr

vue-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日

代码牛
1.5k 声望655 粉丝