箭頭流程圖--前端實現

目標

實現箭頭的流程圖，本次開發用的是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 }] } },

最后

如果還有什么疑問或者建議，可以多多交流，文筆有限，才疏學淺，文中若有不正之處，萬望告知，歡迎大家指正批評！！！