vue3流程图组件vue flow使用

1、依赖安装

$ npm i --save @vue-flow/core
# or
$ yarn add @vue-flow/core
# 其他根据需要安装，例如：
$ npm i --save @vue-flow/additional-components

2、局部引入

//样式引入
import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';
//根据使用情况，引入相关组件
import { Background, Panel, PanelPosition, Controls } from '@vue-flow/additional-components'
import { VueFlow, useVueFlow } from '@vue-flow/core'

3、组件使用

<VueFlow fit-view-on-init class="my-flow" v-model="elements">
  <Background />
  <Panel :position="PanelPosition.TopRight">
    <div>
      <label for="ishidden">
        hidden
        <input id="ishidden" v-model="isHidden" type="checkbox" />
      </label>
    </div>
  </Panel>
  <Controls />
</VueFlow>

4、vue3、elementui完整代码