vue实现简易流程图

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

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

上述布局代码：

<template>
    <div class="process">
        <div class="process_box">
            <el-row
                v-for="(row, index) in process"
                :key="index" class="process_list"
                :ref="(row.num != 1 ? 'ref_' + getRandom()  : null)"
            >
                <div
                    v-if="(row.num != 1)"
                    :class="[(row.num != 1 ? 'row_line' : ''), row.unset_border]"
                >
                </div>
                <div
                    v-for="(item, key) in row.list"
                    :key="key" :style="{width: item.width}"
                    :class="[
                        item.class_name,
                        'box_li',
                        (item.clear == 'before' ? 'clear_before' : (item.clear == 'after' ? 'clear_after' : ''))
                        ]"
                >
                    {{item.label}}
                </div>
            </el-row>
        </div>
    </div>
</template>

process变量结构含义：

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

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