jsPlumb的学习使用(三):常规流程图完成

这篇文章就给大家展示个人的一个jsplumb成品,也是放在自己的项目之中.注释我基本上也都写好了,但是目前代码还没有进行整理,还有很多的测试痕迹以及备注打印.

先说包含的功能:

1.将节点拖拽到画布,精准放置画布内

2.画布中的节点可以自己主动去连线

3.画布节点和连线点击可以查看详情,并且可以删除节点和连线,并且重新绘制画布.

效果图如下:

jsPlumb的学习使用(三):常规流程图完成_第1张图片

全部代码:

父组件(左侧和画布组件)











 



    

子组件(右侧信息栏)



vue3的项目可以直接引用如上的代码,下载相关依赖就可以运行了.

你可能感兴趣的:(jsplumb,流程图,js,vue.js)