插件化 | 乐趣区

简介：在线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工作区IDString/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右键菜单IDString/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修改代码规范Eslin2019年1月17日否1.0.2调试入口文件2019年1月17日否1.0.3npm下载包错误修改2019年1月17日否1.0.x优化配置文件2019年1月x日否六、未来新版本1.1.0 版本需求①工作区内节点拖拽②优化传参和公共属性七、结语原文在GitHub如果觉得对你有帮助希望能给我一个小小的start vue-task-node如过你对vue-task-node感兴趣就联系我和我一起开发他吧????感谢您看到最后！ ...