阿里云空间部署网站it培训班学出来有用吗

一、实现

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