简介：
在线 Demo https://codesandbox.io/s/9413yop49rvue-task-node 是一个基于 Vue 的任务节点图绘制插件（vue-task-node is a Vue based task node mapping plug-in）
首先来张图展示一下
❤MyHome:????github：https://github.com/Liwengbin 思否：https://segmentfault.com/u/vi… 掘金：https://juejin.im/user/5bd967…npm：https://www.npmjs.com/~liwenbing✉：liwenbingmsc@qq.com
一、安装
npm install vue-task-node -S
二、引入
import Vue from ‘vue’
import VueTaskNode from ‘vue-task-node’
Vue.use(VueTaskNode)
三、教程
①工作区
<task-work-area style=”width: 900px;height: 600px”>
<!– 需要绘制的节点 –>
</task-work-area>
参数
说明
类型
是否必填
id
工作区 ID
String/Number
必填
style
高度和宽度必修设置
Number
必填
②Node 节点
组件
<task-start-end-node :selectNode=”selectNode” mousemenu=”menu_id” :node=”node”></task-start-end-node>
需要的数据
node:{
id: ‘node1’,
icon: ‘icon-task-chucun’,
title: ‘ 数据 ’,
state: ‘success’,
positionX: 400,
positionY: 100,
inports: [
id: ‘node1_in1’,
isConnected: true //true-> 有数据输入；false-> 无数据输入
],
outports: [
{
id: ‘node1_out1’,
content: ‘xml’
}
]
}
参数
说明
类型
是否必填
selectNode
选中节点回调函数
function(event,node)
否
mousemenu
鼠标右击弹出菜单 ID
<task-mouse-menu> 的 ID
必填
node
节点数据
Json
必填
③节点间的链接线
组件
<task-path :start=”{x:150,y:300}” :end=”{x:300,y:400}”></task-path>
<task-curve-path areaID=’area’ :connection=”connection”></task-curve-path>
需要的数据
法一的数据：
start:{x:150,y:300} // 起点坐标
end:{x:300,y:400} // 终点坐标
法二的数据：
connection: [
{
start: ‘node1_out1’,// 输出节点的 id
end: ‘node2_in1’// 输入节点的 id
},
{
start: ‘node2_out2’,
end: ‘node4_in1’
},
{
start: ‘node4_out1’,
end: ‘node3_in1’
},
{
start: ‘node4_out2’,
end: ‘node5_in1’
},
{
start: ‘node4_out2’,
end: ‘data_in1’
},
{
start: ‘data_out1’,
end: ‘node6_in1′
}
]
<task-curve-path>
参数
说明
类型
是否必填
areaID
工作区 ID
<task-work-area> 的 ID
必填
connection
关系数据
Array
必填
<task-path>
参数
说明
类型
是否必填
start
起点坐标
Number
必填
end
终点坐标
Number
必填
④鼠标右击节点菜单
<task-mouse-menu id=”menu_id”>
<task-mouse-item :selectClick=”updateNode” icon=”icon-task-fuzhi” :mouse=”{id:’xg’,title:’ 修改 ’}”></task-mouse-item>
</task-mouse-menu>
数据格式
mouse:{id:’xg’,title:’ 修改 ’}
<task-mouse-menu>
参数
说明
类型
是否必填
id
右键菜单 ID
String/Number
必填
<task-mouse-item>
参数
说明
类型
是否必填
icon
被选项图标
css 类
否
selectClick
点击备选项回调函数
function(event,select)
必填
mouse
数据
Json
必填
⑤输入 / 输出节点 List
<task-in-port-list :inports=”[{id:’data_in1′,isConnected:true}]”>
<task-in-port pid=”data_in5″></task-in-port>
</task-in-port-list>
<task-out-port-list :outports=”[{id:’data_out1′,content:’ 表格 ’}]”>
<task-out-port pid=”data_out5″></task-out-port>
</task-out-port-list>
四、Demo
<template>
<div id=”app”>
<div class=”hello” style=”text-align: center”>
<task-work-area id=”area” style=”width: 900px;height: 800px;display: inline-block;”>
<task-curve-path areaID=’area’ :connection=”connection”></task-curve-path>
<!–<task-path :start=”{x:150,y:300}” :end=”{x:300,y:400}”></task-path>–>
<template v-for=”node in nodes”>
<task-start-end-node :selectNode=”selectNode” mousemenu=”menu_id” :node=”node”></task-start-end-node>
</template>
<task-start-end-node mousemenu=”menu_id” :node=”{id:’node6′,icon:’icon-task-get’,title:’ 数据分组 ’,state:’mistake’,positionX:400,positionY:500}”>
<task-in-port-list :inports=”[{id:’data_in1′,isConnected:true}]”>
<task-in-port pid=”data_in5″></task-in-port>
</task-in-port-list>
<task-out-port-list :outports=”[{id:’data_out1′,content:’ 表格 ’}]”>
<task-out-port pid=”data_out5″></task-out-port>
</task-out-port-list>
</task-start-end-node>
</task-work-area>
<task-mouse-menu id=”menu_id”>
<task-mouse-item :selectClick=”updateNode” icon=”icon-task-fuzhi”
:mouse=”{id:’xg’,title:’ 修改 ’}”></task-mouse-item>
<task-mouse-item :selectClick=”findNode” icon=”icon-task-yulan” :mouse=”{id:’ck’,title:’ 查看 ’}”></task-mouse-item>
<task-mouse-item :selectClick=”removeNode” icon=”icon-task-shanchu”
:mouse=”{id:’sc’,title:’ 删除 ’}”></task-mouse-item>
<task-mouse-item :selectClick=”copyNode” icon=”icon-task-jishufuwu”
:mouse=”{id:’fz’,title:’ 复制 ’}”></task-mouse-item>
<task-mouse-item :selectClick=”bugNode” icon=”icon-task-sx-bug”
:mouse=”{id:’bug’,title:’Bug’}”></task-mouse-item>
</task-mouse-menu>
</div>
</div>
</template>
<script>
export default {
name: ‘App’,
data() {
return {
nodes: [{
id: ‘node1’, icon: ‘icon-task-chucun’, title: ‘ 数据 ’, state: ‘success’, positionX: 400, positionY: 100,
inports: [],
outports: [{id: ‘node1_out1’,content: ‘xml’}]
},{
id: ‘node2’, icon: ‘icon-task-liujisuan’, title: ‘ 数据格式化 ’, state: ‘success’, positionX: 400, positionY: 200,
inports: [{id: ‘node2_in1’, isConnected: true}],
outports: [{id: ‘node2_out1’, content: ‘ 表格 ’}, {id: ‘node2_out2’, content: ‘Json’}, {
id: ‘node2_out3’,
content: ‘xml’
}]
},{
id: ‘node3’, icon: ‘icon-task-tubiao-zhexiantu’, title: ‘ 折线图 ’, state: ‘ready’, positionX: 200, positionY: 500,
inports: [{id: ‘node3_in1’, isConnected: true}, {id: ‘node3_in2’, isConnected: false}],
outports: []
},{
id: ‘node4’, icon: ‘icon-task-shenjing1’, title: ‘ 天气预测 ’, state: ‘running’, positionX: 400, positionY: 300,
inports: [{id: ‘node4_in1’, isConnected: true}],
outports: [{id: ‘node4_out1’, content: ‘ 表格 ’}, {id: ‘node4_out2’, content: ‘Json’}, {
id: ‘node4_out3’,
content: ‘xml’
}]
},{
id: ‘node5’, icon: ‘icon-task-ranqijiance’, title: ‘ 雷达图 ’, state: ‘success’, positionX: 600, positionY: 500,
inports: [{id: ‘node5_in1’, isConnected: true}],
outports: []
},{
id: ‘node6’, icon: ‘icon-task-tubiao-zhuzhuangtu’, title: ‘ 条形图 ’, state: ‘ready’, positionX: 400, positionY: 600,
inports: [{id: ‘node6_in1’, isConnected: true}],
outports: []
}],
connection: [{start: ‘node1_out1’, end: ‘node2_in1’},{start: ‘node2_out2’, end: ‘node4_in1’},{start: ‘node4_out1’, end: ‘node3_in1’},{start: ‘node4_out2’, end: ‘node5_in1’},{start: ‘node4_out2’, end: ‘data_in1’},{start: ‘data_out1’, end: ‘node6_in1’}]
}
},
methods: {
updateNode: function (event, select) {
console.log(event, select);
},
findNode: function (event, select) {
console.log(event, select);
},
removeNode: function (event, select) {
console.log(event, select);
},
copyNode: function (event, select) {
console.log(event, select);
},
bugNode: function (event, select) {
console.log(event, select);
},
selectNode(event, node) {
console.log(event, node);
}
}
}
</script>
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding: 50px;
background-color: #cccccc;
}
</style>
<!–
.icon {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^=”icon-task”], [class*=” icon-task”] {
font-family:”iconfont” !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
–>
五、版本
版本
说明
更新时间
是否支持拖拽
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.x
优化配置文件
2019 年 1 月 x 日
否
六、未来新版本
1.1.0 版本需求
①工作区内节点拖拽②优化传参和公共属性
七、结语
原文在 GitHub 如果觉得对你有帮助 希望能给我一个小小的 start vue-task-node 如过你对 vue-task-node 感兴趣就联系我和我一起开发他吧???? 感谢您看到最后！