前端如何用 div 标签实现步骤审批

在前端实现一个步骤审批流程，通常是通过 div 标签和 CSS 来构建一个可视化的流程图，结合 JavaScript 控制审批的状态变化。你可以使用 div 标签创建每一个步骤节点，通过不同的样式（如颜色、边框等）表示审批的不同状态，并通过事件控制流程的进度。

1. 基本思路

每一个步骤使用一个 div 标签来表示。
步骤之间使用箭头或连接线表示流程的顺序。
每个步骤有不同的状态，比如 待审批、已通过、已拒绝，用颜色来区分。
使用 JavaScript 或框架（如 Vue.js、React）来动态控制步骤的状态。

2. 示例代码

HTML + CSS + JavaScript 实现简单的步骤审批流程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>步骤审批流程</title><style>.approval-flow {display: flex;justify-content: space-around;margin-top: 50px;}.step {position: relative;width: 100px;height: 100px;border-radius: 50%;text-align: center;line-height: 100px;font-size: 14px;color: white;cursor: pointer;transition: background-color 0.3s;}.step p {margin: 0;}/* 步骤状态 */.pending {background-color: gray;}.approved {background-color: green;}.rejected {background-color: red;}/* 箭头连接线 */.arrow {position: absolute;top: 50%;width: 50px;height: 3px;background-color: gray;left: 100%;margin-left: 10px;transform: translateY(-50%);}.arrow-right {transform: rotate(90deg);}</style>
</head>
<body><div class="approval-flow"><div class="step pending" id="step1" onclick="changeStatus(1)"><p>步骤1</p></div><div class="arrow"></div><div class="step pending" id="step2" onclick="changeStatus(2)"><p>步骤2</p></div><div class="arrow"></div><div class="step pending" id="step3" onclick="changeStatus(3)"><p>步骤3</p></div></div><script>let currentStep = 1;// 改变步骤的状态function changeStatus(step) {if (step < currentStep) return; // 如果点击的步骤是已完成的，不能点击const stepElement = document.getElementById('step' + step);if (step === currentStep) {stepElement.classList.remove('pending');stepElement.classList.add('approved'); // 当前步骤通过currentStep++; // 前进到下一个步骤}}</script></body>
</html>

3. 解释代码

HTML 结构

我们创建了一个包含三个步骤的流程。每个步骤都是一个 div 元素，标记为 step。
每个步骤之间有一个 div 连接线，代表步骤之间的流程顺序。
点击每个步骤时，触发 changeStatus 函数，动态改变步骤的状态。

CSS 样式

.approval-flow：使用 flex 布局将步骤水平排列。
.step：每个步骤是一个圆形，通过 border-radius: 50% 和固定的 width 和 height 实现。
- pending：默认状态，灰色表示该步骤还未审批。
- approved：步骤通过时，绿色表示已通过。
- rejected：如果需要拒绝状态，可以用红色来表示。
.arrow：用来表示步骤之间的连接线，使用了 position: absolute 来定位并通过 transform: rotate(90deg) 实现箭头的方向。