vue实现简易流程图

这是最终实现的效果

总体的思路是，定义一个变量，通过循环该变量来渲染流程图。然后将该流程图文件封装成一个组件，父组件只需要按照要求格式定义好变量结构和值，然后传值给子组件。

父组件传值变量结构如图：

如图2，process为要定义的变量，该变量为对象类型，每一个值为对应图1的一行，一行多个值的话，需要在list增加多个数据。
process变量结构含义：

process: [
	{
    
    
		num: // 代表当前区块数量，及一行要展示小方块的数量
		list: [
			{
    
     // 定义区块内容
				class_name: // 代表区块的样式-可选，目前可选值：blue\grey，
				label: //区块名称
				width: // 区块宽度-可选，
				clear: // 是否清除当前组件伪类，区块上下线条为伪类实现，清除对应伪类，该线条就不展示了-可选，目前可选值：before\after
				id: // 点击区块跳转到页面相应位置，id为该锚点的ID-可选
 			}
		]
	}
]

具体实现的代码放在：vue-simple-process
大家有需要的可以去下载下，对你有用的话，别忘随手给个star