vue中bpmn-js加载后以只读方式显示

<template>
  <a-modal
    title="流程图"
    :visible="visible"
    width="80%"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="canvas" ref="canvas"></div>
  </a-modal>
</template>

<script>

// 引入相关的依赖
import BpmnViewer from 'bpmn-js/lib/Viewer'

export default {
  data() {
    return {
      visible: false,
      // bpmn建模器
      bpmnViewer: null,
      confirmLoading: false
    }
  },
  methods: {
    open(bpmn20Xml) {
      this.visible = true
      this.$nextTick(() => {
        this.init(bpmn20Xml)
      })
    },
    init(bpmn20Xml) {
      // 获取到属性ref为“canvas”的dom节点
      // 建模
      this.bpmnViewer = new BpmnViewer({
        container: this.$refs.canvas,
        keyboard: {
          bindTo: window
        }
      })
      this.createNewDiagram(bpmn20Xml)
    },
    async createNewDiagram(bpmn20Xml) {
      try {
        const result = await this.bpmnViewer.importXML(bpmn20Xml)
        const { warnings } = result
        console.log(warnings)
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    },
    handleOk() {
      this.handleCancel()
    },
    handleCancel() {
      this.bpmnViewer.destroy()
      this.visible = false
    }
  }
}
</script>

<style scoped>
.canvas{
  width: 100%;
  height: 400px;
}

</style>