JTopo + Vue 实现自定义拖拽流程图

时间:2020-8-26 作者:admin


JTopo + Vue 实现自定义拖拽流程图

市场上做流程图的插件比较多,这里介绍一种基于canvas编写的js插件,结合vue框架做出精美的流程图
首先搭建vue框架,这里就不做介绍,由于jtopo官方demo里用到了jquery,所以我的项目里也引用了jquery插件,鉴于这里用到了很多的dom操作,所以建议大家也直接引用jquery进行操作;
然后将jtopo.js下载到本地,放到自己的vue项目的静态文件目录下,如下图:
JTopo + Vue 实现自定义拖拽流程图
最终实现效果如下图
JTopo + Vue 实现自定义拖拽流程图
节点右键编辑
JTopo + Vue 实现自定义拖拽流程图
点击线操作
JTopo + Vue 实现自定义拖拽流程图
代码在不断完善中,有不错的建议和意见欢迎提出!

进入体验效果
进入github

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。