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

08/27 17:06
阅读数 2.1K

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

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









进入体验效果
进入github

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部