当前位置: 首页 > news >正文

Vue-flow中动态流程图的实现

一、实现

在Vue-flow官网中,关于动态流程图的部分长这样

他可以让你的流程变得可动,更加容易理解

Examples中提供了各个文件的代码以及importMap,但是当我复制文件过来之后发现无法渲染,控制台报警告

我们只需要在index.vue中引入

import '@vue-flow/core/dist/style.css'

 二、修改为自定义样式

在官方例子中,根节点长这样,如果我们想要将根节点中的图标修改为字符串,我们只需要在ProcessNode.vue中将processLabel计算属性修改,如下

const processLabel = computed(() => {
  if (isStartNode.value) {
    return 'node'
  }

  switch (status.value) {
    case ProcessStatus.ERROR:
      return 'faild'
    case ProcessStatus.SKIPPED:
      return '🚧'
    case ProcessStatus.CANCELLED:
      return '🚫'
    case ProcessStatus.FINISHED:
      return '😎'
    default:
      return '🏠'
  }
})

下面switch中的几个case分别对应各个节点根据状态不同显示的图案(字符串)

而bgColor则代表各个节点更具不同状态显示的背景颜色

const bgColor = computed(() => {
  if (isStartNode.value) {
    return '#2563eb'
  }

  switch (status.value) {
    case ProcessStatus.ERROR:
      return '#f87171'
    case ProcessStatus.FINISHED:
      return '#42B983'
    case ProcessStatus.CANCELLED:
      return '#fbbf24'
    default:
      return '#4b5563'
  }
})

如果想要去除右上角控制器,只需要在index.vue中删除<Panel>标签中的内容

      <Panel class="process-panel" position="top-right">
        <div class="layout-panel">
          <button v-if="isRunning" class="stop-btn" title="stop" @click="stop">
            <Icon name="stop" />
            <span class="spinner" />
          </button>
          <button v-else title="start" @click="run(nodes)">
            <Icon name="play" />
          </button>

          <button title="set horizontal layout" @click="layoutGraph('LR')">
            <Icon name="horizontal" />
          </button>

          <button title="set vertical layout" @click="layoutGraph('TB')">
            <Icon name="vertical" />
          </button>
        </div>

        <div class="checkbox-panel">
          <label>Cancel on error</label>
          <input v-model="cancelOnError" type="checkbox" />
        </div>
      </Panel>

整个流程的开启函数则是在useRunProcess.js中修改,在index.vue中通过run(nodes)调用

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

相关文章:

  • ffmpeg windows 基本命令
  • 安装并运行hadoop程序
  • macos 程序 运行
  • clang-format安装配置与vscode支持
  • 【附源码】Java动漫视频网站源码【带弹幕系统】+SpringBoot+VUE+前后端分离
  • 有关Java中的IO(2) --字符流以及其他流
  • upload-labs详解(13-20)文件上传分析
  • manus是什么?能干啥?
  • 基于SpringBoot的车辆违章信息管理系统的设计与实现(源码+SQL脚本+LW+部署讲解等)
  • LLM 学习(二 完结 Multi-Head Attention、Encoder、Decoder)
  • LN1132 低功耗 300mA 低压差 CMOS 电压稳压器
  • debain12.9使用unsloth微调Qwen2.5模型
  • Ubuntu20.04搭建gerrit code review
  • nnMamba:基于状态空间模型的3D生物医学图像分割、分类和地标检测
  • 深度学习算法实战——情感语音合成(主页有源码)
  • LeetCode 2523. Closest Prime Numbers in Range(2025/3/7每日一题)
  • OSI七大模型 --- 发送邮件
  • 操作系统 2.4-内核级线程基本实现原理
  • 小程序和页面生命周期详解
  • 游戏元宇宙崛起:AI代理IP驱动虚拟世界“无限可能”​
  • web3区块链
  • 火绒终端安全管理系统V2.0--纵深防御体系(分层防御)之规则拦截层
  • 深度学习笔记——循环神经网络RNN
  • 2025年Q2(桥门式)起重机司机考试题库
  • 换元积分法的数学本质与几何可视化——一场关于变量代换的数学探秘
  • 深度学习驱动的智能化革命:技术演进与跨行业实践
  • React + React-intl @3.xx + TypeScript
  • DeepSeek系列模型技术报告的阅读笔记
  • 前馈神经网络 - 参数学习(梯度下降法 - 多分类任务)
  • [LeetCode力扣hot100]-堆