vue3流程图组件vue flow使用

原创

已于 2023-07-06 09:34:31 修改 · 5.1w 阅读

138 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #流程图 #前端

于 2022-08-16 16:21:59 首次发布

本文介绍了如何在 Vue 3 项目中集成 VueFlow，包括依赖安装、组件引入与使用，以及配合Element UI的完整代码示例。通过背景、面板和控制组件，实现节点拖拽和样式切换。

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>