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

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

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

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

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

查看所有标签

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

高性能JavaScript

高性能JavaScript

Nicholas C.Zakas / 丁琛、赵泽欣 / 电子工业出版社 / 2010-11 / 49.00元

如果你使用JavaScript构建交互丰富的Web应用,那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方......一起来看看 《高性能JavaScript》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具