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

相关推荐
paopaokaka_luck4 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94937 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
UQWRJ38 分钟前
菜鸟教程R语言一二章阅读笔记
开发语言·笔记·r语言
飛_40 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl