vue3流程图组件vue flow使用

本文介绍了如何在 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>

4、vue3、elementui完整代码

评论 18
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值