箭头流程图--前端实现
⽬标
实现箭头的流程图，本次开发⽤的是vue+scss形式，不过基本上都是css3+js⽽已，简单易懂，同样也好拓展。
图例
思路
⽗元素设置flex布局，⼦元素都是⾃适应，可随着屏幕宽度变化⽽变化。
设置双伪元素::before/::after，⼀个在前，⼀个在后，通过设置border-top/bottom/left的⼤⼩，让与⽗元素契合。
通过:first-child/:last-child设置第⼀个和最后⼀个不显⽰伪元素。
需要给flow-charts-single设置右圆⾓，因为正常的情况下会有⼀条⽩线。设置圆⾓，并向伪元素再往左移动1px。看起来更加毫⽆违和感。
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" :>        <div class="number">{{!item.unt:'暂⽆该功能'}}</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;vuejs流程图插件
}
.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
}]
}
},
最后
如果还有什么疑问或者建议，可以多多交流，⽂笔有限，才疏学浅，⽂中若有不正之处，万望告知，欢迎⼤家指正批评

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