@css+html实现蛇形流程布局
通过css + html 实现节点流程布局
需求背景：
在开发可视化流程节点编排项⽬时需要做⼀个节点的执⾏流程结果的展⽰⽤于呈现某条流程的执⾏过程，⼤致展⽰结果如下图：
说实话，刚拿到设计图时很闷，这咋做（低声细语好恶⼼的东西），但是没办法呀！有困难就要去克服，本着⼀个专业程序员的修养（默默打开了百度），⼀番搜寻⽆果——属实搞⼼态。索性放下去搞别的了，不能把其他⼯作卡住呀。当其他⼯作OK后⼜拿起了这个需求左看⼜看，突然脑⼦中浮现了新的想法。
实现思路：
1. ⾸先将拿到的节点数据进⾏格式化操作，将原本的⼀维数组，改为⼆维数组，再将偶数⾏数据逆排列。
2. html 部分将⼀维数组作为⾏排列，将⼆维数组进⾏列排列，在通过flex布局控制奇偶⾏样式，实现，⾄于节点间连线，让UI切了张图
放⼊节点连接处。
既然有了思路那就撸起袖⼦加油⼲——开始撸代码了！！
代码实现：
1. 先将节点数据进⾏格式化操作
formatNodes(list){
let newList =deepClone(list)
let data =[];
/*
index: 当前data数组需要添加的索引
start: 开始截取的位置
end: 截取结束的位置
*/
const deep=(index, start, end)=>{
// 当截取内容为空时结束递归循环
if(!newList.slice(start,end).length){
html的flex布局
return
}else{
// 当index索引为奇数时(也就是偶数⾏)，将截取到的数据逆排列添加
if(index %2===1){
data[index]=[...newList.slice(start,end)].reverse()
}else{
// 当为偶数时(也就是奇数⾏)，将截取数据正向排列添加
data[index]=[...newList.slice(start,end)]
}
deep(++index, end, end+5)
}
}
deep(0,0,5)
return data;
}
2. 定义html结构：通过索引判断当前⾏为奇数⾏还是偶数⾏，偶数⾏时添加.right类名使连线向右，奇数⾏相反，并需要在奇偶⾏对应的
开头结尾处添加.left-bottom和.right-bottom使联想向下旋转。
<div class="node-order">
<div class="node-row"
:style="{
justifyContent: index % 2 === 1 &&
item.length < 5 ?
'flex-end' :
'space-between'
}"
v-for="(item,index) in keyPoints"
:key="index">
<div
class="node-col"
v-for="(val,key) in item"
:key="key">
<div>
<span class="node-name">{{val}}</span>
<div
:class="['node-arrow', item[0] > item[item.length-1] ? 'right-bottom' : 'left-bottom']"
v-if="(index % 2 === 1 && item.length == 5 && key === 0) || (index % 2 === 0 && item.length == 5 && key === 4)">
<img src="../../../../public/img/icon/arrow.png" alt="连线">
</div>
</div>
<div
:class="['node-arrow', index % 2 === 1 ? 'left' : 'right']"
:
v-if="key < item.length -1">
<img src="../../../../public/img/icon/arrow.png" alt="连线">
</div>
</div>
</div>
</div>
3. 设置css样式
.node-order{
padding: 32px 28px;
box-sizing: border-box;
.node-row{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 12px;
&:first-child{
margin-top: 0px;
}
.node-col{
display: flex;
justify-content: flex-end;
& div:first-child{
white-space: nowrap;
}
}
}
.node-arrow{
width: 34px;
height: 10px;
}
.left,
.right{
margin: 0px 12px;
}
.left{
transform:rotate(180deg);
}
.right{
transform:rotate(0deg);
}
.right-bottom,
.left-bottom{
margin-top: 12px;
height: 22px;
transform:rotate(90deg);
}
.
right-bottom{
justify-content: flex-end;
}
.node-name{
line-height: 22px;
}
}
4. 到这⾥就实现了原型图的样式了，其实实现后觉得并不难，代码都很简单，但是作为⼀个新思路吧 我还是决定记录下来，毕竟在做的
过程中还是遇到了⼀些好的东西。
其实在，最开始的时候有想着去⼀些现成的东西去做，⽐如：
1. antv/x6：
在x6中有⼀个⽹格布局很类似，这个我也实现出来了，但是效果不太好，⽽且不仅要安装@antv/x6还要安装@antv/layout两个组件库才可以实现，为之所以舍弃这个是因为需要安装两个组件库(虽说项⽬中已经有x6组件库了)，但还有⼀点是因为它⽣成的结构不能合理的适配，所有我果断放弃了。但并不
意味这它不好，蚂蚁⾦服的可视化组件库还是很不错的，在这个项⽬中我就⽤x6实现了⼀个编排数据分析图，还是要为x6点赞。有兴趣的可以看看这个库。
2. go.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。