7.使用overlay添加定制内容

最新推荐文章于 2024-03-12 11:47:15 发布

老柳聊技术

最新推荐文章于 2024-03-12 11:47:15 发布

阅读量473

点赞数

分类专栏： BPMN-JS实战教程文章标签： bpmn-js camunda 工作流 flowable

本文链接：https://blog.csdn.net/leyoliu/article/details/128548415

版权

BPMN-JS实战教程专栏收录该内容

8 篇文章 11 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在web上显示的BPMN元素中使用overlay技术进行内容补充和样式修改。通过vue框架，详细阐述了四个步骤：引入BPMN文件、添加overlay定制代码、设置CSS样式以及运行演示，最终实现BPMN元素的注释添加与自定义样式。

摘要由CSDN通过智能技术生成

需求

有时候对web上显示的BPMN元素信息进行补充展示或样式的修改，可以使用html结合overlay技术进行定制。

下面通过官方示例结合vue框架做个示例

步骤

1.添加目录流程

在assets/bpmn目录中添加qr-code.bpmn文件，内容如下，然后在代码中引入

import qrcodeBpmn from '@/assets/bpmn/qr-code.bpmn';

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
             xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

了解本专栏