vue实现简易流程图

·  阅读 529

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

父组件传值变量结构如图: 图2 组件变量接口 如图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

分类:
前端
标签:
分类:
前端
标签: