前言

最近在用Avue开发项目的时候，无意中发现了这样一个流程图

发现还有这样一个插件可以直接做流程图的哦~那不得赶紧试试看。

点击链接进入jsPlumb官网

简单介绍一下jsPlumb

它是一个开源的JavaScript库，它可以让你轻松地创建网页上的流程图和拓扑图。

jsPlumb的核心是一个基于HTML5的画布系统，它允许你在网页上绘制图形，并实现连接线、锚点和动画等功能。

开始使用

安装插件

既然要使用，肯定要安装的咯

npm install jsplumb --save

在页面上引入

import jsplumb from 'jsplumb'

vue页面

这个是在写文章时的案例，所以页面上没有太多的元素，就用默认的吧。

<template> 
    <div class="plumbDemo" ref="plumbDemo"></div> 
</template>

实例化对象

在组件的mounted函数中，实例化了jsplumb对象并将其挂载在Vue的实例上。

mounted() {
    this.$nextTick(() => {
        this.initJsplumb()
    })
},

初始化jsplumb

在上面实例化中，调用了 initJsPlumb 方法，那么就要在 methods 中初始化。

初始化是为了能在页面中正确渲染出想要的图形效果。

initJsplumb() {
    this.jsplumbInstance = jsplumb.getInstance({
        Container: this.$refs.plumbDemo
    })
}

监听事件

在jsplumb中为我们提供了很多事件，用于实现我们所需要的交互效果，比如：

• connection：连接事件
• connectionDetached：断开连接
• connectionMoved：移动连接
• click：点击事件

更多事件描述可以点击链接

initJsplumb() {
    this.jsplumbInstance = jsplumb.getInstance({
        Container: this.$refs.plumbDemo
    })

    // 绑定事件
    this.jsplumbInstance.bind('connection', this.onConnection)
    this.jsplumbInstance.bind('connectionDetached', this.onConnectionDetached)
    this.jsplumbInstance.bind('click', this.onClick)
},

• 通过上面初始化时定义的 jsplumbInstance 来绑定事件

onConnection(info) {
    // 连接事件
    const sourceId = info.connection.source.dataset.nodeId
    const targetId = info.connection.target.dataset.nodeId
    this.$emit('onConnection', sourceId, targetId)
},

onConnectionDetached(info) {
    // 断开连接事件
    const sourceId = info.connection.source.dataset.nodeId
    const targetId = info.connection.target.dataset.nodeId
    this.$emit('onConnectionDetached', sourceId, targetId)
},

onClick(info) {
    // 点击事件
    if (info.source) {
        const nodeId = info.source.dataset.nodeId
        this.$emit('onClick', nodeId)
    }
}

• 由于我们直接将这个vue页面封装成一个组件，所以我们使用this.$emit方法将需要传递的信息传递给父组件。

初始化元素

首先要定义元素值，在 data 中定义一个数组元素，用于存放流程图上的数据

elements: [{
        id: '1',
        title: '自定义流程①',
        top: 100,
        left: 200
    },
    {
        id: '2',
        title: '自定义流程②',
        top: 100,
        left: 450
    },
    {
        id: '3',
        title: '自定义流程③',
        top: 300,
        left: 450
    },
    {
        id: '4',
        title: '自定义流程④',
        top: 250,
        left: 700
    }
]

• 这里的参数值应该不需要去解释了

定义初始化方法 initElements

initElements() {
    this.elements.forEach((item) => {
        const node = document.createElement('div')
        node.classList.add('node')
        node.style.top = item.top + 'px'
        node.style.left = item.left + 'px'
        node.dataset.nodeId = item.id
        node.innerHTML = item.title

        const endpoint = this.jsplumbInstance.addEndpoint(node, {
            anchor: 'Continuous',
            uuid: item.id
        })

        this.jsplumbInstance.draggable(node, {
            containment: true
        })

        this.$refs.plumbDemo.appendChild(node)
    })
}

• 调用上面初始化时定义的 jsplumbInstance 调用 jsplumb 的 addEndpoint 方法和 draggable 方法
• addEndpoint 方法会为定义的元素添加连接点，并将我们定义的 id 赋值给连接点的uuid
• draggable 方法可以让元素能够进行拖拽操作

监听元素

由于我们需要直接封装成一个组件，所以我们会将元素值通过父组件传递过来，那么就需要在子组件中监听到该元素值的变化

watch: {
    elements(value) {
        if (value && value.length) {
            this.initElements()
        }
    }
}

完整的组件代码

• 完整代码仅提供子组件的，父组件调用就不用放出来了吧

总结一下吧

这篇文章简单介绍了一下如何使用Vue+jsPlumb创建流程图的过程，并提供了部分代码和注意事项。

希望这篇文章能够帮助您更好地使用jsPlumb来制作流程图。