后端手绘流程图过时了：TinyVue-Flowchart跨端组件开发实战指南

在前端开发领域，TinyVue的Flowchart组件凭借其独特的网格布局系统和响应式设计，为开发者提供了一种高效绘制流程图的解决方案。以下将从基础应用到高级定制，全面解析这一组件的使用技巧。

玩转 OpenTiny TinyVue 的 Flowchart 流程图组件：从基础到深度定制的实战指南

---

一、 组件概述与核心机制

传统前端开发中，绘制流程图往往需要引入重量级图表库，但在实际业务场景中，我们通常只需要展示轻量级、可交互的流程图表。

该组件采用创新的混合渲染架构：

1. 节点（Nodes）： 通过Vue DOM元素实现绝对定位渲染，便于使用插槽进行深度定制。
2. 连线（Links）： 采用Canvas绘制背景层，确保连线平滑度，并通过自研DSL解决响应式布局问题。

---

二、 核心数据模型与 DSL 解析

使用组件时需要提供data和config两个核心对象。

1. 节点的网格布局系统

组件采用虚拟网格系统定位节点，而非固定像素值：

const node = createNode(name, status, label, date, items, row, col, other)

1. row和col： 表示节点在虚拟网格中的行列索引。
2. 自动计算： 组件根据配置参数自动计算节点绝对坐标。
3. status： 预设状态包括已完成、进行中、未开始和异常四种。

2. 独创的连线相对路径描述语法

组件创新性地采用相对描述字符串控制连线轨迹：

createLink(from, to, p, status, style)

1. 方向指令：
   1. r/l控制水平移动
   2. b/t控制垂直移动
2. 步长数值： 表示移动的网格单位倍数
3. 圆角指令： 使用c实现平滑转弯效果

源码逻辑透视：

核心解析逻辑通过正则表达式实现：

const regDir = /^([lrtb])(d+(.d+)?)$/
const regDirC = /^([lrtb])(d+(.d+)?)c$/

---

三、 Vue 3 Composition API 实战样例

基础应用示例展示组件核心功能：

---

四、 进阶：使用插槽自定义节点

当默认样式无法满足需求时，可通过插槽实现深度定制。

1. 提供的作用域插槽

1. #icon="params"：自定义节点图标
2. #label="params"：自定义节点文字
3. #content="params"：自定义底部内容区

2. 实战：定制处理人Popover

---

五、 实用配置项与常见避坑指南

1. 实用配置项说明

通过createConfig()可自定义图表参数：

配置属性	类型	默认值	作用说明
width/height	number	1024/420	画布尺寸
rows/cols	number	8/8	网格行列数
colors	object	{ 1: '#1890ff', ... }	状态颜色方案
listWidth	number	62	底部容器宽度
adjustPos	function	null	坐标微调函数
drawLink	function	null	连线绘制逻辑

2. 常见避坑指南

1. 文字溢出： 通过调整labelWidth控制文字显示长度。
2. 性能优化： 使用markRaw避免Vue深度代理导致的性能问题。
3. 样式穿透： 使用:deep选择器覆盖默认样式限制。

---

六、 总结

通过创新的网格系统和DSL设计，TinyVue的Flowchart组件有效解决了流程图开发中的响应式布局难题，是企业级流程可视化开发的理想选择。