vue3中使用工作流插件 bpmn.js中bo.get is not a function问题处理-bpmn右侧属性面板不显示问题

这个问题我搞了一天,最后发现是版本兼容问题, vue bpmn.js中bo.get is not a function问题处理-bpmn右侧属性问题

版本的兼容性问题 ,推荐使用以下版本 bpmn-js@7.3.1 bpmn-js-properties-panel@0.37.2 bpmn-moddle@6.0.0

npm install bpmn-js@7.3.1
npm install bpmn-js-properties-panel@0.37.2
npm install bpmn-moddle@6.0.0

运行源代码

<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
    <!-- <properties-view v-if="bpmnModeler" :modeler="bpmnModeler" /> -->
  </div>
</template>

<script setup>
  import { ref, onMounted, reactive } from 'vue'
  import BpmnModeler from 'bpmn-js/lib/Modeler'
  import { xmlStr } from '../../../mock/xmlStr'

  import propertiesPanelModule from 'bpmn-js-properties-panel'
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

  // import { BpmnpropertiesProviderModule, BpmnpropertiesPanelModule } from 'bpmn-js-properties-panel'

  // bpmn建模器
  let bpmnModeler = reactive({})
  // let container = ref(null)
  let canvas = ref()

  //挂载时初始化
  onMounted(() => {
    init()
  })

  function init() {
    console.log('@@', 7898)
    //可操作时候创建实例为BpmnModeler
    bpmnModeler = new BpmnModeler({
      container: canvas.value,
      //添加控制板
      //添加控制板
      propertiesPanel: {
        parent: '#js-properties-panel',
      },
      additionalModules: [
        // 右边的属性栏
        propertiesPanelModule,
        propertiesProviderModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
        //   // authority: authorityModdleDescriptor,
      },
    })
    createNewDiagram()
  }

  function createNewDiagram() {
    // 将字符串转换成图显示出来
    bpmnModeler.importXML(xmlStr, (err) => {
      if (err) {
        // console.error(err)
      } else {
        // 这里是成功之后的回调, 可以在这里做一系列事情
        success()
      }
    })
  }

  function success() {
    // console.log('创建成功!')
  }
</script>

<style scoped>
  .containers {
    position: absolute;
    background-color: #fff;
    width: 100%;
    height: 55.5rem;
  }

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

  .panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
</style>

此时右边的属性栏就出来了