vue3 使用 bpmn.js 报错 canvas.findRoot is not a function

当在 Vue3 中尝试使用 Bpmn.js 这个流程图库时，遇到 "canvas.findRoot is not a function" 的错误通常意味着你在尝试访问一个 canvas 元素上不存在的 findRoot 方法。Bpmn.js 需要在初始化 canvas 时正确设置，并且该方法是在 BpmnJS 模块提供的 Diagram 类中。

以下是可能出现问题的一些原因以及解决办法：

1. **未正确实例化**: 确保你已经成功创建了一个 Diagram 实例，并且在 Vue 组件中通过 `ref` 或其他方式正确地引用了它。

<template>
  <div ref="bpmnDiagram"></div>
</template>

<script setup>
import { createDiagram } from 'bpmn-js/lib/Diagram';

const diagramRef = ref(null);
onMounted(async () => {
  const bpmnModel = await loadBpmnModel(); // 加载模型
  diagramRef.value = createDiagram({ container: document.getElementById('bpmn-container'), model: bpmnModel });
});
</script>

2. **API版本不符**: 检查引入的 Bpmn.js 版本是否支持 findRoot 方法，有些早期版本可能不包含这个功能。

3. **Vue绑定问题**: 如果你在模板中直接尝试调用 findRoot，确保在渲染完成后再操作，可以使用 `nextTick` 函数。

4. **DOM元素获取错误**: 确保 id 或查询选择器（getElementById 或 querySelector）指向正确的 canvas 容器元素。

如果以上步骤都检查过了还是无法解决问题，你可以试着检查具体的报错堆栈，看看是不是某个特定环节出现了问题。此外，可以考虑查看 Bpmn.js 的官方文档或社区论坛寻求帮助，或者在 Bpmn.js 的 GitHub 上创建一个新的 issue 描述你的问题。