记录一下最近做camunda工作流时候整合VUE bpmn.js时候遇到的坑吧
1、VUE中引入bpmn.js,在package.json在原有的基础下加入以下内容后npm install
"devDependencies": {
"vue-template-compiler": "2.6.10",
"bpmn-js-properties-panel": "^0.33.2",
"camunda-bpmn-moddle": "^4.0.1"
},
"dependencies": {
"bpmn-js": "^6.4.2"
},
2、VUE页面引入的时候有两种方式(可能不止两种方式,我只试了这两种)
方式一:这种方式引入的是编辑模式的,有左边的编辑面板
import BpmnModeler from 'bpmn-js/lib/Modeler'
方式二: 这种方式引入的是查看模式,仅可以看,不可以编辑
import BpmnViewer from 'bpmn-js/lib/Viewer'
3、接下来以Viewer模式来介绍下如何使用
(1)在<template>里面加个div,样式可以不设置,不设置默认页面居中
<div style="left: 0px;width:800px;height: 400px;" ref="bpnmDiv"></div