bpmn是比較方便的繪製流程圖的插件，官方demo https://github.com/bpmn-io/bpmn-js-examples
本文主要包括vue項目中bpmn使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。
前情提要
上文我們已經實現了在外部更改節點名。此時又有新玩法：在流程圖中，根據節點狀態為其標記不同顏色。例如：已完成：黃色，正在進行：綠色，本次我們通過兩種方式來實現該需求。效果：
方式1：modeling.setColor
modeling.setColor接受兩個參數：參數1：節點實例，可以是單個元素，也可是多個節點組成的數組，參數2：class類
let modeling = this.bpmnModeler.get('modeling'); modeling.setColor(節點實例, { stroke: 'green', fill: 'yellow' });
方式2：Overlay
個人理解，overlay是通過定位方式在元素正上方添加一層帶顏色的蒙板
const $overlayHtml = $('
').css({ width: shape.width, height: shape.height }); overlays.add(節點id, { position: {top: 0, left: 0}, html: $overlayHtml });
highlight-overlay：css中聲明好的class類名
overlays.add將創建好的蒙板定位到指定節點位置，此時節點id就是目標節點的唯一身份！
注意事項
上述兩種方式均能實現為節點添加顏色。但方式2有一點副作用，如果此時你為節點註冊了點擊事件，在節點被點擊的時候要做某些處理。此時方式2會使節點點擊事件失效。
原因：方式2中，此時節點上方有一層蒙板，並且和節點等寬等高，相當於節點被蒙板完全覆蓋。所以點擊節點的時候，點擊的是蒙版，不是節點。
不要慌，有解決辦法！此時為蒙板註冊了點擊事件，將點擊節點要做的操作給蒙板也來一份，哈哈
import $ from 'jquery'; // 引入jquery $(".djs-container").on("click", ".djs-overlays", (e) => { const parentEle = e.target.parentElement.parentElement; const shapeId = parentEle.getAttribute('data-container-id'); const temp = this.nodeList.filter( (item) => item.id === shapeId )[0]; // 此時temp就是蒙板下方的節點，要點擊節點做什麼，此刻儘管拿去用 ........ });
後續
上文代碼都是片段，特此附上完整代碼：老規矩：data中的chart變量流程圖xml文件數據，由於行數過多，附在了附件中（點我！點我），使用時，將附件內容複製過來，賦值給chart即可運行！
[zhang3221994 ] vue項目中使用bpmn為節點添加顏色的方法已經有340次圍觀
