Flow 流程

avue-flow 使用 jsPlumb 2.x 绘制流程连线，提供节点选择、拖动、增删和变化事件。使用前需要在浏览器环境加载兼容版本并使 window.jsPlumb 可用，缺失时触发 error。

效果预览可直接操作下方示例

从节点连接点拖出连线，点击连线可确认删除；节点按钮演示新增、选择和删除。宽画布在示例内部横向滚动。

正在加载示例…

<template>
  <el-space wrap>
    <el-button type="primary" :disabled="!ready" @click="addNode">添加节点</el-button>
    <el-button @click="selectNext">选择下一个节点</el-button>
    <el-tag>当前节点：{{ active || '未选择' }}</el-tag>
  </el-space>
  <el-alert v-if="error" :title="error" type="error" :closable="false" />
  <div class="flow-demo-scroll">
    <avue-flow ref="flow" v-model="active" :option="option" :height="400" :width="960"
               @ready="ready = true" @error="error = $event.message">
      <template #header="{ node }">
        <span>{{ node.name }}</span>
        <el-button text type="danger" size="small" @click.stop="flow?.deleteNode(node.id)">删除</el-button>
      </template>
      <template #default="{ node }">
        <span>节点标识：{{ node.id }}</span>
      </template>
    </avue-flow>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
const flow = ref(null)
const ready = ref(false)
const error = ref('')
const active = ref('start')
const option = ref({
  nodeList: [
    { id: 'start', name: '提交申请', left: 35, top: 70 },
    { id: 'review', name: '人工审核', left: 345, top: 70 },
    { id: 'finish', name: '流程结束', left: 655, top: 70 }
  ],
  lineList: [{ from: 'start', to: 'review' }, { from: 'review', to: 'finish' }]
})
const visibleNodes = computed(() => option.value.nodeList.filter(node => !node.display))
function addNode() {
  flow.value?.addNode('补充材料', { left: 345, top: 245 })
}
function selectNext() {
  const nodes = visibleNodes.value
  if (!nodes.length) { active.value = ''; return }
  const index = nodes.findIndex(node => node.id === active.value)
  active.value = nodes[(index + 1) % nodes.length].id
}
</script>

<style scoped>
.flow-demo-scroll { max-width: 100%; overflow: auto; margin-top: 16px; border: 1px solid var(--el-border-color); border-radius: 8px; }
</style>

Props

参数	说明	类型	默认值
modelValue / v-model	当前激活节点的 ID，不是流程数据	string / number	''
option	流程数据 { nodeList, lineList }，组件直接更新其中数组	object	两个空数组
width / height	画布尺寸，推荐数字或百分比；百分比高度需父容器高度	number / string	100%
editable	是否允许用户拖动和连线	boolean	true
showGrid / gridSize	显示背景网格 / 网格尺寸；网格仅为背景	boolean / number	true / 20
nodeWidth / nodeHeight	默认节点宽度 / 最小高度	number / string	220 / 96
confirmDelete	删除节点或连线时进行确认	boolean	true

数据结构

const option = {
  nodeList: [
    { id: 'start', name: '开始', left: 40, top: 80 },
    { id: 'review', name: '审核', left: 340, top: 80 }
  ],
  lineList: [{ from: 'start', to: 'review' }]
}

节点 id 必须唯一，left / top 为数字坐标，可通过 width / height 覆盖默认尺寸。display: true 表示隐藏节点；deleteNode 采用该标记并删除关联线，不从 nodeList 物理移除。提交后端前可过滤隐藏节点。

用户连线会检查自连、重复线以及直接反向线，不是完整的有向环检测。替换整套流程数据时建议通过 Vue key 重建组件，当前版本不深度监听 option 来重建 jsPlumb。

Events

事件	参数
update:modelValue	当前节点 ID
click / node-click	当前 node
node-add / node-remove / node-change	新增 / 标记移除 / 位置变化的 node
line-add / line-remove	{ from, to }
change	{ type, option, node? 或 line? }，type 为对应节点或线的变更类型
ready	初始化后的 jsPlumb 实例
error	初始化依赖缺失时的 Error

Methods 与 Slots

方法	参数与返回值	说明
addNode	(name, config?) => node 或 null	新增节点，config 可指定 id、位置、尺寸等；旧文档中的 nodeAdd 不是当前方法名
deleteNode	(id) => Promise<boolean>	确认后隐藏节点并移除关联线
addLine / deleteLine	(from, to) => boolean	更新数据列表，不自动创建或移除可见 jsPlumb 连线
revalidate	无	重绘已有连线

header 与 default 插槽分别自定义节点头部与正文，参数都是 { node }。editable 限制用户操作，业务调用实例方法时仍需自行检查权限。