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

充气大锤2025-03-08 13:57

一、实现

在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)调用