如何解决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>
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')
解决方法
我能够解决这个问题。问题是我在模板上使用 ref=container
然后将它传递给画布选项。当我使用 `document.getElementById("container") 来引用元素时,我能够让它工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。