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

一、实现

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

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

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

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

复制代码
import '@vue-flow/core/dist/style.css'

二、修改为自定义样式

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

javascript 复制代码
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则代表各个节点更具不同状态显示的背景颜色

javascript 复制代码
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>标签中的内容

html 复制代码
      <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)调用

相关推荐
天水幼麟3 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
天水幼麟5 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
绿皮的猪猪侠5 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj6 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机