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

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

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

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日

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

查看所有标签

猜你喜欢:

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

Python编程实践

Python编程实践

Jennifer Campbell、Paul Gries、Jason Montojo、Greg Wilson / 唐学韬 / 机械工业出版社华章公司 / 2011-12-31 / 49.00元

Python是当今世界流行的编程语言之一。本书共15章,通过一些短小精悍的交互式Python脚本帮助学生进行练习,并在这个过程中掌握诸如数据结构、排序和搜索算法、面向对象编程、数据库访问、图形用户界面等基本概念以及良好的程序设计风格。本书既是一本注重科学的计算机科学专业教材,也是一本目标明确的Python参考书。 本书语言风格言简意赅,图表丰富,简单实用,是一本优秀的Python入门级读物,......一起来看看 《Python编程实践》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具