在前端开发中，BPMN 即 Business Process Model and Notation，是一种流程建模标准。然而，BPMN 的核心标准并不包含属性面板的定义，因此需要借助第三方库来实现。
在本文中，我们将介绍一个 npm 包 bpmn-js-properties-panel-jl，它是由 Jörg Lindenthal 开发的一个用于 BPMN 模型中属性面板的插件，可以帮助前端开发者快速、轻松地为 BPMN 模型添加属性面板。如果您想通过 bpmn-js 在自己的应用程序中使用 bpmn-js-properties-panel-jl，则需要阅读下文中的使用教程。
安装
在使用 npm 包之前，您需要先安装依赖项。您可以通过运行以下命令来安装依赖项：
npm install --save bpmn-js bpmn-js-properties-panel bpmn-js-properties-panel-jl
使用
引入
在您的项目中引入依赖项：
import BpmnModeler from 'bpmn-js/lib/Modeler'; import propertiesPanelModule from 'bpmn-js-properties-panel'; import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'; import jlPropertiesProviderModule from 'bpmn-js-properties-panel-jl'; import 'bpmn-js-properties-panel/styles/properties.less';
注册
在注册您的 BpmnModeler 之前，您需要将我们的插件注册到您的 BpmnModeler 实例中：
-- -------------------- ---- -------
----- ------- - --- -------------
---------- ----------
------------------ -
----------------------
-------------------------
--------------------------
--
---------------- -
------- -------------
-
---
----- ------------------------ - --------------------------------------
------------------------ -- -
----- ------- - ---------------------------------------
----- -------------- - -----------------------
------------------------------------------------------------------
-------------------------
------------------------
-------
---
---这里要注意的是，上面的注册必须在您调用 modeler.createDiagram 前执行。
配置
Bpmn-js-properties-panel-jl 提供了许多可配置的选项，您可以在创建实例时传递配置对象：
-- -------------------- ---- -------
-------------------------------------------------------
---------------- -
------- -------------
--
----------- -
-
--- ---------
------ ---- -------
------- -
-
--- -----------
------ ------ -------
-------- -
-
--- -----------
------ ------ -------
----- ------- -------------
-
-
-
-
-
-
---示例代码
-- -------------------- ---- -------
------ ----------- ---- ----------------------
------ --------------------- ---- ---------------------------
------ ------------------------ ---- ------------------------------------------------
------ -------------------------- ---- ------------------------------
------ --------------------------------------------------
----- ------- - --- -------------
---------- ----------
------------------ -
----------------------
-------------------------
--------------------------
--
---------------- -
------- -------------
-
---
----- ------------------------ - --------------------------------------
-------------------------------------------------------
---------------- -
------- -------------
--
----------- -
-
--- ---------
------ ---- -------
------- -
-
--- -----------
------ ------ -------
-------- -
-
--- -----------
------ ------ -------
----- ------- -------------
-
-
-
-
-
-
---
------------------------ -- -
----- ------- - ---------------------------------------
----- -------------- - -----------------------
------------------------------------------------------------------
-------------------------
------------------------
-------
---
---结论
通过本文，您已经了解了如何使用 bpmn-js-properties-panel-jl 来创建 BPMN 模型中的属性面板。除此之外，本文还提供了详细的示例代码以及必要的配置信息，方便您快速开始工作。如果您在使用 bpmn-js-properties-panel-jl 时遇到问题，请参考 Jörg Lindenthal 的官方文档，里面包含了更详细的介绍和例子。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5a51ab1864dac66fcc