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

相关推荐
星海穿梭者7 分钟前
SQL SERVER 查看锁表
java·服务器·前端
一枚前端小能手10 分钟前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
影i10 分钟前
关于浏览器 Cookie 共享机制的学习与梳理
前端
文心快码BaiduComate11 分钟前
文心快码已接入GLM-4.6模型
前端·后端·设计模式
RoyLin22 分钟前
C++ 原生扩展、node-gyp 与 CMake.js
前端·后端·node.js
我是天龙_绍37 分钟前
二进制散列值 搞 权限组合,记口诀:| 有1则1 ,&同1则1
前端
江城开朗的豌豆42 分钟前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
爱吃甜品的糯米团子1 小时前
CSS Grid 网格布局完整指南:从容器到项目,实战详解
前端·css
AlbertZein1 小时前
新手上手:Rokid 移动端 + 眼镜端最小实践
前端
前端达人1 小时前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript