bpmn基础使用（一）

bpmn.js是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

基本使用

npm install --save bpmn-js

//mian.js
// 以下为bpmn工作流绘图工具的样式
import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

//home.vue
import BpmnViewer from 'bpmn-js';
var viewer = new BpmnViewer({
  container: '#canvas'
});

基础API

//创建空白流程图 
this.bpmnModeler.createDiagram();
// 将图形dom挂载到目标节点
this.bpmnModeler.attachTo(parentNode);
// 清空
this.bpmnModeler.clear()
// 销毁
this.bpmnModeler.destroy()
// 脱离dom
this.bpmnModeler.detach()
// 获取流程定义
this.bpmnModeler.getDefinitions()
// 注销事件监听器
this.bpmnModeler.off(eventName, callback)
// 保存为svg文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveSVG(callback)
// 保存为xml文件，与importXML方法一样，后续会取消传入callback的方式
this.bpmnModeler.saveXML(callback);
//放大缩小视图
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);