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

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

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

进入体验效果
进入github

你可能感兴趣的:(vue组件,HTML5,css,拖拽流程图,vue.js,jquery,javascript,html5,游戏引擎)