參考 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>