北京中烟创新科技有限公司(简称:中烟创新)自成立以来,一直专注于人工智能技术的研发和人机协同应用场景的赋能,并以此为核心提供专业的服务。在过去的近一年中,公司取得了一些令人瞩目的研究成果,我们一直坚持把一些研究成果技术分享给更多人,今天是中烟创新第十一次技术分享,希望能为前沿技术探索者贡献一份力量,互相学习,共同进步。
![](http://dingyue.ws.126.net/2024/0612/8e078f00j00sey6am001kd000u0008pm.jpg)
Vue Flow具有内置功能,如缩放和平移以及专用控件、单选和多选、可拖动元素、可自定义的节点和边以及一系列事件处理程序。
Vue-flow是 ReactFlow 的 Vue 版本,目前只支持 在Vue3中使用,对Vue2不兼容,目前国内使用较少。包含四个功能组件core、background、controls、minimap,可按需使用。
Vueflow官网:https://vueflow.dev/
Github地址:https://github.com/bcakmakoglu/vue-flow
![](http://dingyue.ws.126.net/2024/0612/86b59e6ej00sey6an0027d000u000g6m.jpg)
![](http://dingyue.ws.126.net/2024/0612/e6effb87j00sey6an004nd000u000ggm.jpg)
优点
轻松上手:内置缩放和平移功能、元素拖动、选择等等。
可定制:使用自定义节点、边缘和连接线并扩展Vue Flow的功能。
快速:链路被动更改,仅重新渲染适当的元素。
工具和组合:带有图形助手和状态可组合函数,用于高级用途。
附加组件:背景(内置模式、高度、宽度或颜色),小地图(右下角)、控件(左下角)。
缺点
仓库迭代版本较少,2022年进入首次迭代。
国内使用人数少,没有相关技术博客介绍,通过官网学习。
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.组件使用
class="my-flow" v-model="elements">
"width: fit-view-on-init;"
hidden
label>
div>
Panel>
VueFlow>
热门跟贴