前言
之前的几个demo都是在vue3中写的,虽然可以直接拿去复用。
但是根据有些看客反馈,想用一个vue2版本的,毕竟很多人开发功能的时间都不是特别富裕。大多时候还是用现成的demo更好一些。
这里我就写一个简易版本的demo,可以实现绘制,并且删除连接线和节点等功能,篇幅也不大,适合应急的朋友,哈哈
代码
1.剥离公共的配置 config.js
export const readyConfig = { Container: 'plumbBox', anchor: ['Bottom', 'Top', 'Left', 'Right'], connector: 'Straight', endpoint: 'Blank', PaintStyle: { stroke: '#8b8c8d', strokeWidth: 2, outlineStroke: 'transparent', outlineWidth: 10 }, Overlays: [['Arrow', { width: 10, length: 5, location: 0.5, direction: 1 }]], endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 } } export const sourceConfig = { filter: '.pointNode', filterExclude: false, allowLoopback: true, maxConnections: -1, Container: 'plumbBox', anchor: ['Bottom', 'Top', 'Left', 'Right'], connector: 'Straight', endpoint: 'Blank', PaintStyle: { stroke: '#8b8c8d', strokeWidth: 2, outlineStroke: 'transparent', outlineWidth: 10 }, Overlays: [['Arrow', { width: 10, length: 5, location: 0.5, direction: 1 }]], endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 } } export const targetConfig = { filter: '.pointNode', filterExclude: false, allowLoopback: true, maxConnections: -1, Container: 'plumbBox', anchor: ['Bottom', 'Top', 'Left', 'Right'], connector: 'Straight', endpoint: 'Blank', PaintStyle: { stroke: '#8b8c8d', strokeWidth: 2, outlineStroke: 'transparent', outlineWidth: 10 }, Overlays: [['Arrow', { width: 10, length: 5, location: 0.5, direction: 1 }]], endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 } }
其实这些配置都大差不差,之所以分别罗列,是让大家搞明白,画布层级的配置,起点节点的配置以及终点节点的配置都是可以单独去配置,具体配置项可以看我之前的文档。
2.使用简易数据 data.js
export const leftMenuList = [ { name: "节点1", id: "app1", }, { name: "节点2", id: "app2", }, { name: "节点3", id: "app3", }, { name: "节点4", id: "app4", }, ]
这里的数据其实是左侧的数据
3.组件部分
左侧菜单
downNode(el, item)" > {{ item.name }} {{ item.name }}操作提示
左侧拖拽至右侧画布
右键节点是删除节点,左键线条是删除线条
各个函数的注释都写好了,操作方法也在其中,最主要的是根据插件暴露的api去领悟其中的每一个方法。