这个问题我搞了一天,最后发现是版本兼容问题, 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>
此时右边的属性栏就出来了