vue流程图实现
Vue 流程图实现方案
使用第三方库
推荐使用 vue-flow 或 bpmn-js 等成熟库快速实现流程图功能。安装 vue-flow：
npm install @braks/vue-flow基础示例代码：
<template>
<VueFlow v-model="elements" />
</template>
<script>
import { VueFlow } from '@braks/vue-flow'
export default {
components: { VueFlow },
data() {
return {
elements: [
{ id: '1', type: 'input', label: '节点1', position: { x: 0, y: 0 } },
{ id: '2', label: '节点2', position: { x: 0, y: 100 } },
{ id: 'e1-2', source: '1', target: '2' }
]
}
}
}
</script>自定义实现方案
通过 SVG 和动态组件实现基础流程图：
<template>
<svg width="100%" height="500">
<FlowNode
v-for="node in nodes"
:key="node.id"
:node="node"
@node-click="handleClick"
/>
<path
v-for="link in links"
:key="link.id"
:d="calcPath(link)"
stroke="#333"
fill="none"
/>
</svg>
</template>
<script>
export default {
data() {
return {
nodes: [
{ id: 1, x: 50, y: 50, text: '开始' },
{ id: 2, x: 50, y: 150, text: '步骤1' }
],
links: [
{ id: 1, from: 1, to: 2 }
]
}
},
methods: {
calcPath(link) {
const from = this.nodes.find(n => n.id === link.from)
const to = this.nodes.find(n => n.id === link.to)
return `M ${from.x} ${from.y} L ${to.x} ${to.y}`
}
}
}
</script>交互功能增强
实现节点拖拽和连接线创建：
// 在自定义方案中添加
handleDrag(e, node) {
node.x = e.x
node.y = e.y
},
createConnection(from, to) {
this.links.push({
id: Date.now(),
from,
to
})
}样式优化建议
- 使用 CSS 变量管理主题色：
:root { --flow-node-fill: #fff; --flow-border: 1px solid #ddd; } - 为节点添加状态类名实现高亮效果：
<rect :class="{ 'active-node': activeId === node.id }" @click="$emit('node-click', node.id)" />
性能优化
对于大型流程图：
- 使用虚拟滚动技术
- 实现画布缩放功能
- 采用 Web Worker 处理复杂计算
典型应用场景
- 审批流程配置
- 系统架构图展示
- 业务逻辑可视化
- 算法步骤演示
注意：复杂场景建议直接使用专业库如 bpmn-js，其支持 BPMN 2.0 标准并具备完整的流程设计器功能。
