bpmn-js，Viewer设置节点颜色（vue）

2021-06-01

package.json依赖：

 "dependencies": {
        "axios": "^0.19.0",
        "bpmn-js": "^8.2.0",
        "bpmn-js-properties-panel": "^0.38.1",
        "bpmn-moddle": "^7.0.4",
        "camunda-bpmn-moddle": "^4.0.1",
        "core-js": "^3.4.3",
        "vue": "^2.6.10"
    },

1、先添加CSS。

<style >
.containers {
    background-color: #ffffff;
    width: 100%;
    height: calc(100vh);
}

.canvas {
    width: 100%;
    height: 100%;
}

.nodeSuccess:not(.djs-connection) .djs-visual > :nth-child(1) {
    stroke: red !important;
    stroke-width: 3px;
    /* elements as success */
}

.highlight .djs-visual > :nth-child(1) {
    stroke: green !important;
    fill: rgba(0, 80, 0, 0.4) !important;
}

</style>

注意：style节点没有scoped。