箭头流程图--前端实现

目标

实现箭头的流程图，本次开发用的是vue+scss形式，不过基本上都是css3+js而已，简单易懂，同样也好拓展。

图例

思路

1. 父元素设置flex布局，子元素都是自适应，可随着屏幕宽度变化而变化。
2. 设置双伪元素::before/::after，一个在前，一个在后，通过设置border-top/bottom/left的大小，让与父元素契合。
3. 通过:first-child/:last-child设置第一个和最后一个不显示伪元素。
4. 需要给flow-charts-single设置右圆角，因为正常的情况下会有一条白线。设置圆角，并向伪元素再往左移动1px。看起来更加毫无违和感。
5. js相对简单，也可以设置步骤，事件，颜色等等，通过js去设置即可

页面

<div class="flow-charts"> <div class="flow-charts-single" :class="{'disabled-flow-charts-single':item.isDisabled}" v-for="(item) in dealpieData" :key="item.id" :style="{'--color':!item.isDisabled?item.color:'#f5f5f5'}"> <div class="number">{{!item.isDisabled?item.count:'暂无该功能'}}</div> <div class="name">{{item.name}}人数</div> </div> </div> 

样式

.flow-charts{ width: 100%; display: flex; justify-content: center; .flow-charts-single{ flex: 1; height: 72px; background: var(--color); position: relative; display: inline-block; margin-right: 34px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom-right-radius: 2px; border-top-right-radius: 2px; .name{ font-size: 12px; color: #fff; line-height: 18px; margin-top: 5px; font-weight: 400; } .number{ font-size: 22px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #FFFFFF; line-height: 22px; } &::after{ content:''; border-bottom: 36px solid transparent; border-left: 26px solid var(--color); border-top: 36px solid transparent; position: absolute; right: -25px; top: 0; } &::before{ content:''; border-bottom: 36px solid var(--color); border-left: 26px solid transparent; border-top: 36px solid var(--color);  position: absolute; left: -25px; top: 0; } &:first-child{ border-top-left-radius: 4px; border-bottom-left-radius: 4px; &::before{ display: none; } } &:last-child{ margin-right: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; &::after{ display: none; } } } .disabled-flow-charts-single{ .name{ color: #bfbfbf; } .number{ color: #BFBFBF; font-size: 14px; } } } 

js

export default { name:'progress', data:function(){ return { dealpieData:[{ name:'通知', color:'red', count:100 },{ name:'签到', color:'pink', count:200 },{ name:'报到', color:'green', count:0, isDisabled:true },{ name:'参与', color:'red', count:120 }] } },

最后

如果还有什么疑问或者建议，可以多多交流，文笔有限，才疏学浅，文中若有不正之处，万望告知，欢迎大家指正批评！！！