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

原创

于 2021-06-01 22:45:12 发布 · 5.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#bpmn-js #vue #工作流 #流程设计器

本文介绍了如何在Vue项目中利用bpmn-js库，通过修改CSS来实现工作流节点的颜色定制。文章提供了具体的package.json依赖添加步骤，并展示了去除style节点的scoped限制以影响bpmn-js渲染的节点颜色。最后，给出了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。

2、然后修改节点颜色

var canvas = viewer.get('canvas');
// Activity_0djl6l0为节点元素的ID
canvas.addMarker('Activity_0djl6l0', 'hi

最低0.47元/天解锁文章

200万优质内容无限畅学