参考 Ant Design Vue 步骤条思路，只输入一个步骤参数即可实现
参考地址：https://www.antdv.com/components/steps-cn/
思路：循环步骤数组，当输入的步骤是3，小于3的是绿色（通过），等于3是红色（停止）
简约图：
代码：
<!DOCTYPE html> <html> <head> <title>测试</title> <link rel="stylesheet" href="css/common.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, userscalable:no"> <meta charset="utf-8"> <script type="text/javascript" src="vue.js"></script> <style type="text/css"> .circle { width: 20px; height: 20px; } .line { display: inline-block; width: 80px; height: 2px; margin-bottom: 5px; } .mt60 { margin-top: 60px; } i.red-bg { background-color: red; } .fs8 { font-size: 8px; } </style> </head> <body> <div id="app"> <ul class="mt60"> <li v-for="(item, keys) in statusArr" :key="keys" class="inline-block mr5"> <i :class="{'green-bg': item.id < status, 'red-bg': item.id === status}" class="circle inline-block grey-bg"></i> <span :class="{'green-bg': item.id < status}" class="line grey-bg"></span> <div> {{ item.text }} <p v-if="item.id === status" class="fs8 red"> 点击这里处理异常！ </p> </div> </li> </ul> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data() { return { statusArr: [ { id: 1, text: "下单成功" }, { id: 2, text: "发货成功" }, { id: 3, text: "收货成功" }, { id: 4, text: "订单完成" } ], status: 3 } } }); </script> </html>
