Bpmn.io自定义面板属性不显示字段

Question

我尝试在Vue3中使用Vue3建模器加上面板属性，并且我完全遵循了它们在Bpmn.io官方示例中示例中描述的内容。但在Vue (我猜Vuejs是原因)中，它似乎不能正常工作，我也不知道为什么。我可以看到自定义组，但里面完全是空的。

​

​

这是我的密码：

main.js

import { createApp } from 'vue'
import App from './App.vue'

import '../node_modules/bpmn-js/dist/assets/bpmn-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/diagram-js.css'
import '../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import '../node_modules/bpmn-js-properties-panel/dist/assets/properties-panel.css'

createApp(App).mount('#app')

App.vue

<template>
  <div>
    <div id="js-canvas"></div>
    <div id="js-properties-panel"></div>
  </div>
</template>

<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import {
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from "bpmn-js-properties-panel";
import magicPropertiesProviderModule from "./provider/magic/";
import magicModdleDescriptor from "./descriptors/magic";

export default {
  mounted() {
    const diagram = `
    <?xml version="1.0" encoding="UTF-8"?>
    <bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn2:process id="Process_1" isExecutable="false">
        <bpmn2:startEvent id="StartEvent_1"/>
      </bpmn2:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>
          </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn2:definitions>
    `;
    const bpmnModeler = new BpmnModeler({
      container: "#js-canvas",
      propertiesPanel: {
        parent: "#js-properties-panel",
      },
      additionalModules: [
        BpmnPropertiesPanelModule,
        BpmnPropertiesProviderModule,
        magicPropertiesProviderModule,
      ],
      moddleExtensions: {
        magic: magicModdleDescriptor,
      },
    });

    bpmnModeler.importXML(diagram);
  },
};
</script>

Answer 1

我解决了我的问题，我发现我需要配置您的编译器来正确识别JSX。

这就是解决办法：

1-在"@babel/plugin-transform-react-jsx": "^7.18.6"中将devDependency添加为devDependency

​

​

2-向babel.config.js添加插件配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        throwIfNamespace: false,
        runtime: 'automatic', 
        importSource: '@bpmn-io/properties-panel/preact',
      }
    ]
  ]
}