内容简介:①重新组织了节点,使节点具有可扩展性。②新增节点可拖拽。
vue-task-node
在线Demo
1.0.x 版本 https://codesandbox.io/s/9413yop49r
1.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) });
三、教程
四、版本
版本 | 说明 | 更新时间 | 是否支持拖拽 | 是否支持节点连线 |
---|---|---|---|---|
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日 | 是 | 是 |
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 基于Vue的任务节点图绘制插件(vue-task-node)
- xml创建节点(根节点、子节点)
- Vultr VPS 节点选择方法 | 各节点延迟一览
- 1.19 JQuery2:节点插入与节点选取
- ViewGroup 默认顺序绘制子 View,如何修改?什么场景需要修改绘制顺序?
- POC分布式节点算法机制下的超级节点计划
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Namo Webeditor5.5一看就懂.
吳聲毅 / 金禾資訊 / 20040214 / NT$ 169
一看就懂系列書全以初學者的角度切入,全書以STEP BY STEP方式撰寫,並以豐富的圖片搭配教學,在最後更加上日常生活實例運用講解,一路學來一氣呵成。為了增進學習的效率更採用高級紙品全彩印刷,這麼好的書,您還在等什麼,一看就懂系列書保證是您最佳入門學習好伙伴。 本書特色: 1、一看就懂:Step by Step操作詳盡說明、讓您一看就懂 2、精選範例:精彩實務範例生動活......一起来看看 《Namo Webeditor5.5一看就懂.》 这本书的介绍吧!
Base64 编码/解码
Base64 编码/解码
HEX CMYK 转换工具
HEX CMYK 互转工具