內容概述
本系列 “vue項目中使用bpmn-xxxx” 分為七篇，均為自己使用過程中用到的實例，手工原創，目前陸續更新中。主要包括vue項目中bpmn使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。如果轉載或通過爬蟲直接爬的，格式特別丑，請來原創看：我是作者原文
前情提要
上文已經實現了節點操作的前進、后退、導入。導出等操作，今日來實現“流程圖預覽”，以及視圖的放大縮小,效果如下：
前提：項目安裝過bpmn，安裝可見上篇文章
實現要點
bpmn提供了兩個神器：Modeler 和 Viewer，Modeler帶有左側節點欄和右側屬性欄，點擊節點可進行相應操作，Viewer是“查看”，不能更改節點，兩者相互獨立，可按實際需求按需引入
繪制流程圖：import BpmnModeler from 'bpmn-js/lib/Modeler';
預覽流程圖：import BpmnViewer from 'bpmn-js/lib/Viewer';
直接上代碼：
View Code
<template>
<div class="container">
<el-button type="primary" @click="previewTemp">預覽</el-button>
<el-button type="success" @click="handleZoom(1)">放大</el-button>
<el-button type="warning" @click="handleZoom(-1)">縮小</el-button>
<div class="chart-preview">
<div style="clear: both;"></div>
<div class="view-canvas">
<div id="container"
v-bind:style="{width: 100 * scale + '%',height: 100 * scale + '%'}"
></div>
</div>
</div>
</div>
</template>
<script>
import jquery from 'jquery';
import BpmnViewer from 'bpmn-js/lib/Viewer';
export default {
data() {
return {
containerEl: null,
bpmnModeler: null,
scale: 1,
// 此變量為預覽的xml文件數據，由於行數過多，附在了附件中，使用時，將附件整個復值到currentCanvasXml即可
currentCanvasXml: ''
};
},
methods: {
handleZoom(flag) {
if (flag < 0 && this.scale <= 1) {
return;
}
this.scale += flag;
this.$nextTick(() => {
this.bpmnModeler.get('canvas').zoom('fit-viewport');
});
},
previewTemp() {
this.containerEl = document.getElementById('container');
// 避免緩存，每次清一下
this.bpmnModeler && this.bpmnModeler.destroy();
this.scale = 1;
this.bpmnModeler = new BpmnViewer({container: this.containerEl});
const viewer = this.bpmnModeler;
this.bpmnModeler.importXML(this.currentCanvasXml, (err) => {
if (err) {
console.error(err);
} else {
// 只實現預覽，核心代碼以下兩句足夠
const canvas = viewer.get('canvas');
canvas.zoom('fit-viewport');
// 以下代碼為：為節點注冊鼠標懸浮事件
const eventBus = this.bpmnModeler.get('eventBus');
const overlays = this.bpmnModeler.get('overlays');
eventBus.on('element.hover', (e) => {
const $overlayHtml = jquery(` <div class="tipBox">
你好，我是懸浮框里的內容
</div>`);
overlays.add(e.element.id, {
position: {top: e.element.height, left: 0},
html: $overlayHtml
});
});
eventBus.on('element.out', () => {
overlays.clear();
});
// 注冊懸浮事件結束
}
});
}
}
};
</script>
<style lang="scss">
.container {
.tipBox {
width: 200px;
background: #fff;
border-radius: 4px;
border: 1px solid #ebeef5;
padding: 12px;
}
}
</style>
后續
currentCanvasXml 為預覽的xml文件數據，由於行數過多，附在了附件中（點我！點我！），使用時，將整個賦值到currentCanvasXml，代碼才可以運行，否則報錯！！
想獲取完整源碼或有問題，歡迎大家關注我的公粽號，掃下面二維碼或微信搜“前端便利貼”，即可獲取~