vue2中使用jsplumb完成流程图

前言

之前的几个demo都是在vue3中写的,虽然可以直接拿去复用。

但是根据有些看客反馈,想用一个vue2版本的,毕竟很多人开发功能的时间都不是特别富裕。大多时候还是用现成的demo更好一些。

这里我就写一个简易版本的demo,可以实现绘制,并且删除连接线和节点等功能,篇幅也不大,适合应急的朋友,哈哈

代码

1.剥离公共的配置  config.js

export const readyConfig = {
    Container: 'plumbBox',
    anchor: ['Bottom', 'Top', 'Left', 'Right'],
    connector: 'Straight',
    endpoint: 'Blank',
    PaintStyle: { stroke: '#8b8c8d', strokeWidth: 2, outlineStroke: 'transparent', outlineWidth: 10 },
    Overlays: [['Arrow', { width: 10, length: 5, location: 0.5, direction: 1 }]],
    endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}
export const sourceConfig = {
    filter: '.pointNode',
    filterExclude: false,
    allowLoopback: true,
    maxConnections: -1,
    Container: 'plumbBox',
    anchor: ['Bottom', 'Top', 'Left', 'Right'],
    connector: 'Straight',
    endpoint: 'Blank',
    PaintStyle: { stroke: '#8b8c8d', strokeWidth: 2, outlineStroke: 'transparent', outlineWidth: 10 },
    Overlays: [['Arrow', { width: 10, length: 5, location: 0.5, direction: 1 }]],
    endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}
export const targetConfig = {
    filter: '.pointNode',
    filterExclude: false,
    allowLoopback: true,
    maxConnections: -1,
    Container: 'plumbBox',
    anchor: ['Bottom', 'Top', 'Left', 'Right'],
    connector: 'Straight',
    endpoint: 'Blank',
    PaintStyle: { stroke: '#8b8c8d', strokeWidth: 2, outlineStroke: 'transparent', outlineWidth: 10 },
    Overlays: [['Arrow', { width: 10, length: 5, location: 0.5, direction: 1 }]],
    endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}

其实这些配置都大差不差,之所以分别罗列,是让大家搞明白,画布层级的配置,起点节点的配置以及终点节点的配置都是可以单独去配置,具体配置项可以看我之前的文档。

2.使用简易数据 data.js

export const leftMenuList = [
    {
        name: "节点1",
        id: "app1",
    },
    {
        name: "节点2",
        id: "app2",
    },
    {
        name: "节点3",
        id: "app3",
    },
    {
        name: "节点4",
        id: "app4",
    },
]

 这里的数据其实是左侧的数据

3.组件部分

各个函数的注释都写好了,操作方法也在其中,最主要的是根据插件暴露的api去领悟其中的每一个方法。

效果