【个人笔记】用vue+iview做一个页面流程图（jsplumb）

最新推荐文章于 2025-06-04 10:11:09 发布

原创

最新推荐文章于 2025-06-04 10:11:09 发布 · 9.2k 阅读

31 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue和jsPlumb实现自定义流程图设计，包括节点拖拽、连线绘制等功能，并分享了一个基于iview的完整示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在公司做一个项目，需求是用户根据自己的需求自定义一个流程图，流程图的每一步都用拖拽的方式，自己选择功能和完成连线，一开始就去选技术，找到了几个技术：go.js，g6，vue-task-node，jsplumb，jointjs等，最初想用g6，发现vue+g6的文档不多，开源而用得比较多的是jsplumb，所以我就在github上找到了一个比较适用的——easy-flow-master安利给大家，可以上github上直接搜出来，刚好也符合这个项目的技术框架，是基于vue的。

首先在项目中引用draggable和jsplumb

import draggable from 'vuedraggable'
import {jsPlumb} from 'jsplumb'
import flowNode from './node'          //创建子功能块的子组件
import FlowInfo from './info'	             //子功能块上的信息弹窗
import FlowNodeForm from './node_form'          //子功能块上的参数弹窗
import lodash from 'lodash'

data里设置参数

jsPlumb: null,// jsPlumb 实例
easyFlowVisible: true,
jsplumbSetting: {
            // 动态锚点、位置自适应
            Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'Left