Vue Flow: 高效构建可视化工作流的利器

news2024/9/20 18:37:02

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
在这里插入图片描述

  • 推荐：「stormsha的主页」👈，「stormsha的知识库」👈持续学习，不断总结，共同进步，为了踏实，做好当下事儿~

  • 专栏导航

    • Python系列: Python面试题合集，剑指大厂
    • Git系列: Git操作技巧
    • GO系列: 记录博主学习GO语言的笔记，该笔记专栏尽量写的试用所有入门GO语言的初学者
    • 数据库系列: 详细总结了常用数据库 mysql 技术点,以及工作中遇到的 mysql 问题等
    • 运维系列: 总结好用的命令，高效开发
    • 算法与数据结构系列: 总结数据结构和算法,不同类型针对性训练,提升编程思维

    非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

    💖The Start💖点点关注，收藏不迷路💖

    📒文章目录

        • 什么是 Vue Flow？
        • 安装与基本使用
          • 安装 Vue Flow
          • 创建第一个简单的图
        • 高级使用技巧
          • 自定义节点和边
          • 使用事件和钩子函数
        • 实战案例：创建动态工作流编辑器
          • 设计数据结构
          • 动态渲染节点和边
          • 节点和边的交互操作
        • 总结

在这里插入图片描述

在前端开发中，数据可视化和流程管理成为了越来越重要的组成部分。Vue Flow 作为一个基于 Vue.js 的图形编辑库，提供了直观且强大的工具来创建和管理可视化工作流。本文将深入探讨 Vue Flow 的使用技巧，帮助开发者在中高级水平上充分利用这个库的强大功能。

什么是 Vue Flow？

Vue Flow 是一个用于构建和操作节点连接图（node-based diagrams）的 Vue.js 组件库。它可以用来创建动态的工作流、流程图、组织结构图等。Vue Flow 提供了灵活的 API 和直观的界面，使得开发者能够轻松地定义节点、边和布局，并通过事件和钩子函数进行交互。

安装与基本使用

安装 Vue Flow

在开始使用 Vue Flow 之前，我们需要先进行安装。可以通过 npm 或 yarn 进行安装：

npm install @vue-flow/core
# 或者
yarn add @vue-flow/core

安装完成后，在 Vue 项目中引入 Vue Flow 组件：

import { createApp } from 'vue';
import App from './App.vue';
import VueFlow from '@vue-flow/core';

const app = createApp(App);
app.use(VueFlow);
app.mount('#app');
创建第一个简单的图

在组件中使用 Vue Flow 非常简单。下面是一个创建简单节点和边的例子：

<template>
  <vue-flow>
    <vue-flow-node id="1" :position="{ x: 100, y: 100 }" label="Node 1" />
    <vue-flow-node id="2" :position="{ x: 300, y: 100 }" label="Node 2" />
    <vue-flow-edge :source="'1'" :target="'2'" />
  </vue-flow>
</template>

<script>
export default {
  name: 'App',
};
</script>

上述代码定义了两个节点和一条边，并将它们在界面上显示出来。这是使用 Vue Flow 的基本步骤。

高级使用技巧

自定义节点和边

Vue Flow 允许开发者自定义节点和边的样式和行为。通过插槽机制，我们可以在节点和边中嵌入自定义组件：

<template>
  <vue-flow>
    <vue-flow-node id="1" :position="{ x: 100, y: 100 }">
      <template #default="{ data }">
        <div class="custom-node">
          <h3>{{ data.label }}</h3>
          <p>Custom content</p>
        </div>
      </template>
    </vue-flow-node>
    <vue-flow-edge :source="'1'" :target="'2'">
      <template #default="{ edge }">
        <div class="custom-edge">
          <p>Edge: {{ edge.id }}</p>
        </div>
      </template>
    </vue-flow-edge>
  </vue-flow>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
.custom-node {
  padding: 10px;
  background-color: lightblue;
  border: 1px solid #000;
  border-radius: 4px;
}

.custom-edge {
  background-color: lightgreen;
  padding: 5px;
}
</style>

通过这种方式，我们可以将任意的 Vue 组件嵌入到节点和边中，满足不同的展示需求。

使用事件和钩子函数

为了实现更加复杂的交互，Vue Flow 提供了丰富的事件和钩子函数。例如，我们可以监听节点的拖拽事件，并在节点位置变化时执行特定逻辑：

<template>
  <vue-flow @node-position-change="onNodePositionChange">
    <vue-flow-node id="1" :position="{ x: 100, y: 100 }" label="Node 1" />
  </vue-flow>
</template>

<script>
export default {
  name: 'App',
  methods: {
    onNodePositionChange(event) {
      console.log(`Node ${event.node.id} moved to (${event.position.x}, ${event.position.y})`);
    },
  },
};
</script>

通过这种方式，我们可以捕捉到节点位置的变化并作出相应的反应，从而实现更高级的交互逻辑。

实战案例：创建动态工作流编辑器

为了更好地理解 Vue Flow 的强大功能，我们通过一个实际案例来展示如何使用它创建一个动态的工作流编辑器。

设计数据结构

首先，我们需要设计一个数据结构来存储节点和边的信息：

const nodes = [
  { id: '1', position: { x: 100, y: 100 }, data: { label: 'Start' } },
  { id: '2', position: { x: 300, y: 200 }, data: { label: 'Process' } },
  { id: '3', position: { x: 500, y: 300 }, data: { label: 'End' } },
];

const edges = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3' },
];
动态渲染节点和边

接下来，我们通过 Vue Flow 动态渲染这些节点和边：

<template>
  <vue-flow>
    <vue-flow-node
      v-for="node in nodes"
      :key="node.id"
      :id="node.id"
      :position="node.position"
      :data="node.data"
    >
      <template #default="{ data }">
        <div class="node">{{ data.label }}</div>
      </template>
    </vue-flow-node>
    <vue-flow-edge
      v-for="edge in edges"
      :key="edge.id"
      :id="edge.id"
      :source="edge.source"
      :target="edge.target"
    >
      <template #default="{ edge }">
        <div class="edge">{{ edge.id }}</div>
      </template>
    </vue-flow-edge>
  </vue-flow>
</template>

<script>
export default {
  name: 'WorkflowEditor',
  data() {
    return {
      nodes,
      edges,
    };
  },
};
</script>

<style>
.node {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
}

.edge {
  padding: 5px;
  background-color: #eee;
}
</style>

通过这种方式，我们可以根据数据结构动态地生成工作流图，方便地进行可视化操作。

节点和边的交互操作

最后，我们为节点和边添加一些交互操作，例如添加新节点、删除节点等：

<template>
  <vue-flow @node-click="onNodeClick">
    <vue-flow-node
      v-for="node in nodes"
      :key="node.id"
      :id="node.id"
      :position="node.position"
      :data="node.data"
    >
      <template #default="{ data }">
        <div class="node">{{ data.label }}</div>
      </template>
    </vue-flow-node>
    <vue-flow-edge
      v-for="edge in edges"
      :key="edge.id"
      :id="edge.id"
      :source="edge.source"
      :target="edge.target"
    >
      <template #default="{ edge }">
        <div class="edge">{{ edge.id }}</div>
      </template>
    </vue-flow-edge>
  </vue-flow>
  <button @click="addNode">Add Node</button>
</template>

<script>
export default {
  name: 'WorkflowEditor',
  data() {
    return {
      nodes,
      edges,
    };
  },
  methods: {
    onNodeClick(event) {
      alert(`Node ${event.node.id} clicked`);
    },
    addNode() {
      const newNode = {
        id: `${this.nodes.length + 1}`,
        position: { x: 200, y: 200 },
        data: { label: `Node ${this.nodes.length + 1}` },
      };
      this.nodes.push(newNode);
    },
  },
};
</script>

通过这种方式，我们可以实现动态的节点添加和事件响应，增强工作流编辑器的功能性和交互性。

总结

Vue Flow 是一个功能强大且灵活的图形编辑库，适用于各种可视化工作流的创建和管理。通过本文的介绍和示例，开发者可以更好地掌握 Vue Flow 的使用技巧，在实际项目中充分发挥其优势。无论是简单的节点连接图还是复杂的工作流系统，Vue Flow 都能提供强有力的支持，帮助开发者提高效率，创建出色的应用程序。

🔥🔥🔥道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙

💖The End💖点点关注，收藏不迷路💖

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1983693.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

DeEcoStudio快捷键设置

DeEcoStudio快捷键设置

例如 打 bgc 快捷键 直接出 .backgroundColor( ) 第一步&#xff1a;点击文件——>设置 第二步&#xff1a;找到编辑器——>实时模板 第三步&#xff1a;点击加号——>点击实时模板 第四步&#xff1a;设置快捷键 第五步&#xff1a;点击变更——>点击全选…
阅读更多...
jangow靶机教程

jangow靶机教程

项⽬地址 https://www.vulnhub.com/entry/jangow-101754/ 用vmware需要修改部分配置&#xff0c;才能通过C段扫描成功 1.在系统启动时(⻓按shift键)直到显示以下界⾯ 选择第⼆个&#xff0c;按回⻋ 继续选择第⼆个 2.按e进⼊编辑&#xff0c;进⼊以下界⾯ 删除"recove…
阅读更多...
Linux学习笔记：Linux基础知识汇总（个人复习版）

Linux学习笔记：Linux基础知识汇总（个人复习版）

常用命令&#xff1a; 1、ls -a&#xff1a;显示所有文件&#xff08;包括隐藏文件&#xff09;&#xff0c;简洁版 -l&#xff1a;显示所有文件&#xff0c;详细版 -R&#xff1a;显示所有文件以及子目录下文件&#xff0c;简洁版 可以搭配使用。 2、netstat -i&#x…
阅读更多...
gitlab-runner /var/run/docker.sock connect permission denied

gitlab-runner /var/run/docker.sock connect permission denied

usermod -aG docker gitlab-runner sudo service docker restart参考&#xff1a;https://gitlab.com/gitlab-org/gitlab-runner/-/issues/3492
阅读更多...
LeetCode接雨水

LeetCode接雨水

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,…
阅读更多...
深入SpringBoot：SpringCache的集成与使用

深入SpringBoot：SpringCache的集成与使用

目录 一、SpringCache集成声明式与编程式1. 引入依赖2. SpringCache配置3. key的设置4. 使用 二、SpringCache使用1. 基于声明式注释的缓存1.1 Cacheable注解1.2 Cacheable注解属性1.2.1 CacheManager和CacheResolver1.2.2 cacheName1.2.3 key和KeyGenerator1.2.4 同步缓存 2. …
阅读更多...
Linux 内核源码分析---处理 VFS 对象及标准函数

Linux 内核源码分析---处理 VFS 对象及标准函数

处理VFS对象 注册文件系统&#xff1a;在文件系统注册到内核时&#xff0c;文件系统是编译为模块&#xff0c;或者持久编译到内核中。 fs/super.c 中的register_filesystem用来向内核注册文件系统。我们可以通过/proc/filesystems查看系统所有的文件系统类型。 一个文件系统不…
阅读更多...
Idea绿色下载安装教程-最新，2024版本通用-附下载链接

Idea绿色下载安装教程-最新，2024版本通用-附下载链接

插件链接&#xff1a; 脚本 Idea下载安装完成后 进入激活码输入页面&#xff0c;然后关闭IDEA 按照下面流程进行激活 1. 按照以下步骤&#xff0c;亲测可用&#xff0c;记得一定要先关闭idea 2. 选择对应软件 3.选择bin、目录对应选项 5.激活 6.成功
阅读更多...
MySQL--读写分离与分布式存储

MySQL--读写分离与分布式存储

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、读写分离 1、什么是读写分离 在数据库集群架构中&#xff0c;让主库负责处理写入操作&#xff0c;而从库只负责处理select查询&#xff0c;让两…
阅读更多...
部署MySQL数据库时常见错误

部署MySQL数据库时常见错误

登录数据库 时&#xff0c;可能会出现如图错误 1.确认是否部署MySQL服务 2.过滤MySQL端口号&#xff0c;查看服务是否开启&#xff08;如图上半部分&#xff0c;则是服务未开启&#xff09; 3.如图部分&#xff0c;则是密码错误 4.如果忘记了 mysql 的密码&#xff0c;或者登陆…
阅读更多...
Apple Vision Pro 游戏开发：挑战与反思

Apple Vision Pro 游戏开发：挑战与反思

随着Apple Vision Pro的推出，许多游戏开发者开始尝试在这个全新的平台上构建沉浸式的虚拟现实体验。然而，开发者们很快发现，在这个新兴领域中面临着不少挑战，包括支付延迟、技术支持不足、设备性能限制等问题。本文将探讨这些挑战，并提出一些开发者需要注意的关键点。 支…
阅读更多...
Qt：自定义钟表组件

Qt：自定义钟表组件

使用QWidget绘制两种钟表组件&#xff0c;效果如下&#xff1a; 源码下载链接&#xff1a;GitHub - DengYong1988/Clock-Widget: Qt 自定义钟表组件 https://download.csdn.net/download/ouyangxiaozi/89616407 主要代码如下&#xff1a; ClockWgt.h #ifndef CLOCKWGT_H #d…
阅读更多...
spring源码阅读-推断构造方法

spring源码阅读-推断构造方法

如何构造一个对象&#xff1f; 1、默认情况下&#xff0c;或者只有一个构造方法的情况下&#xff0c;就会使用默认构造方法或者唯一的一个构造方法 2、由程序员指定构造方法入参值&#xff0c;通过getBean()的方式获取&#xff0c;可以指定参数类型以及个数&#xff0c;但是该…
阅读更多...
【康复学习--LeetCode每日一题】572. 另一棵树的子树

【康复学习--LeetCode每日一题】572. 另一棵树的子树

题目&#xff1a; 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 subRoot 具有相同结构和节点值的子树。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二叉树 tree 的一棵子树包括 tree 的某个节点和这个节点的所有后代节点。tree …
阅读更多...
SpringBoot3里的文件上传

SpringBoot3里的文件上传

需求分析&#xff1a; 在用户更换头像或者添加文章时&#xff0c;都需要携带一个图片的URL访问地址。当用户访问文件上传接口将图片的数据上传成功后&#xff0c;服务器会返回一个地址。我们后台需要提供一个文件上传的接口&#xff0c;用来接收前端提交的文件的数据并且返回文…
阅读更多...
C++入门基础（完整版）含下卷

C++入门基础（完整版）含下卷

C入门基础 hello 各位未来的程序员大佬们&#xff0c;这一篇是详细介绍入门基础&#xff0c;和上一篇不同的是这一篇补完了引用的知识和inline&#xff0c;nullptr的知识&#xff0c;希望大家有所收获 namespace的价值 在C/C中&#xff0c;变量、函数和后⾯要学到的类都是⼤…
阅读更多...
【w门大学】云计算与大数据零基础特训班视频教程合辑

【w门大学】云计算与大数据零基础特训班视频教程合辑

提取地址 云计算与大数据零基础特训班 课程目录
阅读更多...
“数据要素×”大赛江西分赛官网正式上线 共设置12个赛道

“数据要素×”大赛江西分赛官网正式上线 共设置12个赛道

7月17日&#xff0c;2024年“数据要素”大赛江西分赛在南昌市拉开帷幕。作为全国“数据要素”大赛的地方分赛&#xff0c;江西分赛由国家数据局、江西省人民政府指导&#xff0c;江西省发展改革委&#xff08;省数据局&#xff09;联合18家省级单位共同主办&#xff0c;江西分赛…
阅读更多...
CCRC-DSA数据安全评估师:ISC.AI2024数字安全峰会：安全大模型引领安全行业革命

CCRC-DSA数据安全评估师:ISC.AI2024数字安全峰会：安全大模型引领安全行业革命

7月31日&#xff0c;以“构建先进的安全模型&#xff0c;引领安全产业变革”为主题&#xff0c;ISC.AI 2024数字安全峰会在北京国家会议中心成功举办。 本次峰会旨在鼓励行业通过大规模模型重构安全框架&#xff0c;确保数字经济的稳健前进。 会上&#xff0c;众多院士级专家…
阅读更多...
【pytorch】全连接网络简单二次函数拟合

【pytorch】全连接网络简单二次函数拟合

下面是一个使用PyTorch实现全连接网络来拟合简单二次函数 y x 2 y x^2 yx2 的示例。我们将创建一个简单的神经网络&#xff0c;定义损失函数和优化器&#xff0c;并进行训练。 下面是完整的代码示例&#xff1a; import torch import torch.nn as nn import torch.optim …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023