LogicFlow实现使用vue组件进行自定义节点

LogicFlow是一款很好用的流程图编辑框架，也支持根据html来自定义节点，但是当我们的节点比较复杂时，我们可能更倾向于用vue组件来实现这个功能，现在LogicFlow官方使用vue3的Teleport组件实现了类似的效果，有兴趣的可以先去看看

https://site.logic-flow.cn/tutorial/advanced/vue

vue2没有Teleport组件，需要额外的插件来实现类似的功能

接下来我说一下我的实现思路

vue2

可以通过Vue.extend来生成一个示例进行挂载

简单示例如下（部分实现）：

import { HtmlNodeModel, HtmlNode } from '@logicflow/core';
import { uuid } from 'vue-uuid';
import NewComponent from "./newComponent.vue"

class NewHtmlNode extends HtmlNode {
  setHtml(rootEl) {
    let div = document.createElement('div')
    let uuid = uuid.v1()
    div.id = uuid
    rootEl.appendChild(div)

    var Profile = Vue.extend({
      data() {
        return {}
      },
      components: { newComponent }
      template: '<NewComponent />'
    })
    new Profile().$mount(`#${uuid}`)
  }
}

这样我们就可以愉快的在NewComponent组件中进行各种操作啦

vue3

原理类似，但是由于vue3已经去掉了Vue.extend方法，所以我们只能使用createApp方法

简单示例如下（部分实现）：

class TestHtmlNode extends HtmlNode {
  setHtml(rootEl: HTMLElement) {
    rootEl.innerHTML = ''
    const div = document.createElement('div')
    const app = createApp(HtmlNodeComp)
    app.mount(div)
    rootEl.appendChild(div)
  }
}

也是一样的效果~

PS: 这个方法是早期基于官方只有html节点的实现方法，随着官方的迭代更新，后面还是推荐用官方的哈