基础

仅展示

example

<template>
  <div class="container" ref="container"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import bpmnStr from './demo.js'

let viewer: any
const container = ref<HTMLElement>()

onMounted(() => {
  import('bpmn-js').then(({ default: Viewer }) => {
    viewer = new Viewer({ container: container.value })
    viewer.importXML(bpmnStr)
  })
})
</script>

<style lang='scss' scoped>
.container {
  height: 400px;
}
</style>

可编辑

example

<template>
  <div class="container" ref="container"></div>
</template>

<script lang="ts" setup>
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import { onMounted, ref } from 'vue'
import bpmnEmptyStr from './bpmn-empty.js'

let modeler: any
const container = ref<HTMLElement>()
onMounted(() => {
  import('bpmn-js/lib/Modeler').then(({ default: Modeler }) => {
    modeler = new Modeler({ container: container.value })
    modeler.importXML(bpmnEmptyStr)
  })
})
</script>

<style lang='scss' scoped>
.container {
  height: 400px;
}
</style>