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完整代码

<style lang="less" scoped>
.my-flow {margin: 10px;height: 400px;:deep(.node-light) {background: none;}:deep(.node-dark) {background: #eeeeee;}
}
</style>
<template><div class="container"><el-row :gutter="24"><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">相关文档：<a href="https://vueflow.dev/" target="_blank">Vue Flow官方文档</a></el-col></el-row><el-divider content-position="left">Vue Flow</el-divider><el-row class="mb-4"><el-button type="primary" @click="resetTransform">重置</el-button><el-button type="primary" @click="updatePos">修改属性</el-button><el-button type="primary" @click="toggleclass">修改样式</el-button><el-button type="primary" @click="logToObject">查看属性</el-button></el-row><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></div>
</template><script lang="ts" setup name="DemoBpmn">import '@vue-flow/core/dist/style.css';
/* import the default theme (optional) */
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'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus';const data = [{ id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },{ id: '2', label: 'Node 2', position: { x: 100, y: 100 } },{ id: '3', label: 'Node 3', position: { x: 400, y: 100 } },{ id: '4', label: 'Node 4', position: { x: 400, y: 200 } },{ id: 'e1-2', source: '1', target: '2', animated: true },{ id: 'e1-3', source: '1', target: '3' },
]
let elements = ref(data)const isHidden = ref(false)let { onPaneReady, onNodeDragStop, onConnect, addEdges, setTransform, toObject, nodes, edges } = useVueFlow()watch(isHidden, () => {nodes.value.forEach((n) => (n.hidden = isHidden.value))edges.value.forEach((e) => (e.hidden = isHidden.value))
})onPaneReady(({ fitView }) => {fitView()
})
onNodeDragStop((e) => console.log('drag stop', e))
onConnect((params) => addEdges([params]))const updatePos = () => {nodes.value.forEach((el) => {el.position = {x: Math.random() * 400,y: Math.random() * 400,}})
};const logToObject = () => {ElMessage.info(JSON.stringify(toObject()));
};
const resetTransform = () => {elements.value = datasetTransform({ x: 0, y: 0, zoom: 1 })
};
const toggleclass = () => nodes.value.forEach((el) => (el.class = el.class === 'node-light' ? 'node-dark' : 'node-light'))</script>

官方文档：https://vueflow.dev/

旧版本vue-flow代码例子：https://gitee.com/huanglgln/vue-sys-manage

新版本vue-flow代码例子：https://gitee.com/huanglgln/vue-sys-manage-el

演示地址：http://101.43.32.67:8081

vue3流程图组件vue flow使用相关推荐

vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
Vue3动态绑定组件警告处理
Vue received a Component which was made a reactive object. This can lead to unnecessary performance ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
VUE3祖孙组件传值调用方法
VUE3祖孙组件传值调用方法父子组件传参可以通过 props 和 emit 来实现,但是当组件的层次结构比较深时,props 和 emit 就太繁琐了.vue为了解决这个提出了 provide / ...
vue3.0 组件传值
vue3.0组件传值子组件代码如下(示例): <template><p @click="handle">{{ test }}</p> < ...
vue3父组件调用子组件的方法
东风vue3父组件调用子组件的方法是通过expose和ref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option ...

vue3流程图组件vue flow使用

1、依赖安装

2、局部引入

3、组件使用

4、vue3、elementui完整代码

vue3流程图组件vue flow使用相关推荐

最新文章

热门文章