bpmn io vue 3 集成问题

问题描述

我目前正在尝试将 bpmn io 嵌入到 vue 3 应用程序中。我能够使用 webpack 中的原始加载器加载图表。不幸的是，还有一些其他问题。

1. The side bar on the left is not appearing
2. The canvas.zoom is not working. Diagram occupies only a small portion of the screen width and height.

MainPage.vue（bpmn 魔法所在的文件）

<template>
  <div ref="container" id="canvas" style="height: 100%"/>
</template>

<script>
import pizzaDiagram from '../assets/pizza-diagram.bpmn';

export default {
  name: 'main-page',mounted() {
    this.$nextTick(() => {
      const container = this.$refs.container;
      let modeler = this.$bpmnModeler;
      modeler.attachTo(container)

      modeler.options = {
        container,height: "100%",width: "100%"
      }

      modeler.importXML(pizzaDiagram).then((result) => {
        const {warnings} = result;
        console.log('success !',warnings);
        const canvas = modeler.get('canvas');
        canvas.zoom('fit-viewport')
      }).catch((err) => {
        const {warnings,message} = err;

        console.trace('something went wrong. what went wrong :',warnings,message)
      })
    })
  },data() {
    return {}
  }


}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
#canvas{
  height: 100%;
  width: 100%;
}
</style>

ma​​in.js（我在其中注册我的 bpmn 组件以供一般应用程序范围使用的文件）

import { createApp } from 'vue'
import App from './App.vue'
import Bpmnjs from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js'
import BpmnModeler from "bpmn-js";
import BpmnViewer from "bpmn-js";

const app = createApp(App);
app.config.globalProperties.$bpmnViewer = new BpmnViewer();
app.config.globalProperties.$bpmnModeler = new BpmnModeler();
app.config.globalProperties.$bpmnInstance = new Bpmnjs();


app.mount('#app')

解决方法

我能够解决这个问题。问题是我在模板上使用 ref=container 然后将它传递给画布选项。当我使用 `document.getElementById("container") 来引用元素时，我能够让它工作。