0

使用 BpmnJS 库创建 vue 项目时出现错误。求大神们给点建议,谢谢!

Vue 版本:3.0.0 BpmnJS 版本:8.8.2

文件 App.vue:

<template>
    <div class="containers">
        <div class="canvas" ref="canvas"></div>
    </div>
</template>

<script>
    import BpmnModeler from 'bpmn-js/lib/Modeler'
    export default {
        name: "App",
        data() {
            return {
                bpmnModeler: null
            }
        },
        methods: {
            async createNewDiagram() {
                try {
                    const result = await this.bpmnModeler.importXML(bpmnXmlStr);    //bpmnXmlStr is an bpmn2 diagram xml content
                    const { warnings } = result;
                    console.log(warnings);
                }
                catch (err) {
                    console.log(err);
                }
            }
        },
        mounted() {
            const canvas = this.$refs.canvas
            this.bpmnModeler = new BpmnModeler({
                container: canvas
            })
            this.createNewDiagram() 
        }
    }
</script>

<style lang="scss">
    @import '~bpmn-js/dist/assets/diagram-js.css';
    @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
    @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
    @import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

    .containers {
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 100%;

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

        .bjs-powered-by {
            display: none;
        }
    }
</style>

文件包.json:

   {
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bpmn-js": "^8.8.2",
    "core-js": "^3.6.5",
    "sass": "^1.43.4",
    "sass-loader": "10.0.1",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

bpmnjs 面板正常显示: 在此处输入图像描述 错误详情: 在此处输入图像描述

4

0 回答 0