vue3集成bpmn-js——适配activiti工作流

最新推荐文章于 2025-04-09 16:45:20 发布

m0_67392811

最新推荐文章于 2025-04-09 16:45:20 发布

阅读量4.3k

点赞数

分类专栏：前端 html 文章标签： javascript typescript 前端

本文链接：https://blog.csdn.net/m0_67392811/article/details/123371171

版权

本文介绍了在Vue3项目中集成bpmn-js库，适配Activiti工作流的过程。从安装bpmn-js开始，详细讲解了如何在Vue3中引入相关依赖，解决初始化画布和菜单拖动的问题。同时，提到了两种解决方案，包括不定义data直接在方法中定义bpmnModeler和使用markRaw去除双向绑定。接着，为了设置节点信息，作者引入了bpmn-js-properties-panel和camunda-bpmn-moddle，并展示了如何添加属性面板区域。最后，给出了完整的代码示例和适配Activiti的注意事项。

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

1、安装bpmn-js

npm install bpmn-js

2、vue引入相关依赖

import { markRaw } from 'vue';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import BpmnModeler from 'bpmn-js/lib/Modeler';

3、页面

<div id="container"></div>

4、初始化

data() {
	return {
		containerEl: null,
		bpmnModeler: null
	};
},
mounted() {
	// 初始化流程图
	this.init();
},
methods: {
	/**
	 * 初始化流程图
	 */
	init() {
		this.containerEl = document.getElementById('container');
		// 加markRaw去除双向绑定作用域
		this.bpmnModeler = markRaw(new BpmnModeler({
			container: this.containerEl
		}));
		this.bpmnModeler.createDiagram(() => {
			this.bpmnModeler.get('canvas').zoom('fit-viewport');
		});
	}
}

本人使用vue3+element-plus上述代码是参考各处资料精简得出的，在初始化new BpmnModeler时，一开始没有markRaw出现问题，画布是空白，左侧菜单无法拖动元素到画布上，光标显示禁用图标

前端菜鸟一个，又经过多方查资料，具说vue2没有问题，可直接定义。但vue3也没说清楚要怎么改，最终在下面两个地方找到了2种解决方案

Is bpmn.js currently incompatible with ES6 - Developers - Forum - bpmn.io

vue.js - Specify type of data value in Vue (typescript) - Stack Overflow

（1）、定义bpmnModeler时不定义data，在方法种直接const定义

this.containerEl = document.getElementById('container');
// 加markRaw去除双向绑定作用域
const bpmnModeler = new BpmnModeler({
    container: this.containerEl
});
bpmnModeler.createDiagram(() => {
    bpmnModeler.get('canvas').zoom('fit-viewport');
});

（2）、引入markRaw方法，去除双向绑定

markRaw此处不做赘述，作者也不是很明白

效果图：