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