0

我目前正在尝试将 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>

main.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')
4

1 回答 1

0

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

于 2021-07-21T19:29:59.397 回答