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

栏目: 编程语言 · 发布时间: 5年前

内容简介:①重新组织了节点,使节点具有可扩展性。②新增节点可拖拽。

vue-task-node

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

在线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日

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员的自我修养

程序员的自我修养

陈逸鹤 / 清华大学出版社 / 2017-5 / 49.00

程序员作为一个职业、也作为一个群体,正逐渐从幕后走向前台,并以他们自己的能力加速改变着世界,也改变着人们生活的方方面面。然而,对于程序员,特别是年轻程序员们来说,如何理解自己的职业与发展,如何看待自己的工作与生活,这些问题往往比那些摆在面前的技术难题更让他们难以解答。 这本书从一个成熟程序员、一名IT管理者的角度,以杂记的形式为大家分享关于国内程序员职业生涯、个人发展、编程中的实践与认知乃至......一起来看看 《程序员的自我修养》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具