前端 如何用 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)
实现箭头的方向。
JavaScript 逻辑
changeStatus(step)
函数用于改变步骤的状态。点击步骤后,该步骤的颜色会变成绿色(表示通过),并且流程会前进到下一个步骤。currentStep
变量用来跟踪当前审批到的步骤。
4. 改进建议
- 动态数据:如果你想让这个流程变得更加灵活,可以通过 JavaScript 或后端提供数据动态生成步骤。
- 更多状态:可以加入更多的步骤状态,比如
已拒绝
、处理中
等。 - 动画效果:可以使用 CSS 动画增强交互体验,比如步骤完成时添加渐变、动画过渡等。
- 后端集成:如果步骤审批是基于实际数据(比如审批结果来自服务器),你可以通过 Ajax 或 Fetch API 从后端获取数据并更新流程状态。
这个简单的流程图可以为你提供一个良好的起点,你可以根据需要继续扩展和优化。
相关文章:
前端 如何用 div 标签实现 步骤审批
在前端实现一个步骤审批流程,通常是通过 div 标签和 CSS 来构建一个可视化的流程图,结合 JavaScript 控制审批的状态变化。你可以使用 div 标签创建每一个步骤节点,通过不同的样式(如颜色、边框等)表示审批的不同状态&…...

【大数据技术基础 | 实验十四】Kafka实验:订阅推送示例
文章目录 一、实验目的二、实验要求三、实验原理(一)Kafka简介(二)Kafka使用场景 四、实验环境五、实验内容和步骤(一)配置各服务器之间的免密登录(二)安装ZooKeeper集群(…...

SpringAi整合大模型(进阶版)
进阶版是在基础的对话版之上进行新增功能。 如果还没弄出基础版的,请参考 https://blog.csdn.net/weixin_54925172/article/details/144143523?sharetypeblogdetail&sharerId144143523&sharereferPC&sharesourceweixin_54925172&spm1011.2480.30…...

为什么爱用低秩矩阵
目录 为什么爱用低秩矩阵 一、定义与性质 二、区别与例子 为什么爱用低秩矩阵 我们更多地提及低秩分解而非满秩分解,主要是因为低秩分解在数据压缩、噪声去除、模型简化和特征提取等方面具有显著的优势。而满秩分解虽然能够保持数据的完整性,但在实际应用中的场景较为有限…...
React 自定义钩子:useOnlineStatus
我们今天的重点是 “useOnlineStatus” 钩子,这是 React 自定义钩子集合中众多精心制作的钩子之一。 Github 的:https://github.com/sergeyleschev/react-custom-hooks import { useState } from "react" import useEventListener from &quo…...
uniapp 小程序 监听全局路由跳转 获取路由参数
uniapp 小程序 监听全局路由跳转 获取路由参数 app.vue中 api文档 onLaunch: function(options) {let that this;let event [navigateTo, redirectTo, switchTab, navigateBack];event.forEach(item > {uni.addInterceptor(item, { //监听跳转//监听跳转success(e) {tha…...
12.02 深度学习-卷积
# 卷积 是用于图像处理 能够保存图像的一些特征 卷积层 如果用全连接神经网络处理图像 计算价格太大了 图像也被转为线性的对象导致失去了图像的空间特征 只有在卷积神经网络cnn的最后一层使用全连接神经网络 # 图像处理的三大任务 # 目标检测 对图像中的目标进行框出来 # 图…...

MySQL 主从同步一致性详解
MySQL主从同步是一种数据复制技术,它允许数据从一个数据库服务器(主服务器)自动同步到一个或多个数据库服务器(从服务器)。这种技术主要用于实现读写分离、提升数据库性能、容灾恢复以及数据冗余备份等目的。下面将详细…...

Spring源码导入idea时gradle构建慢问题
当我们将spring源码导入到idea进行构建的时候,spring采用的是gradle进行构建,默认下注在依赖是从https://repo.maven.apache.org会特别慢,需要改为国内的镜像地址会加快速度。 将项目中build.gradle配置进行调整: repositories …...
Dockerfile 安装echarts插件给java提供服务
java调用echarts插件,生成图片保存到磁盘然后插入到pptx中报表。 Dockerfile文件内容: #基础镜像,如果本地仓库没有,会从远程仓库拉取 openjdk:8 FROM docker.io/centos:centos7 #暴露端口 EXPOSE 9311 # 避免centos 日志输出 …...

Springboot小知识(1):启动类与配置
一、启动类(引导类) 在通常情况下,你创建的Spring应用项目都会为你自动生成一个启动类,它是这个应用的起点。 在Spring Boot中,引导类(也称为启动类,通常是main方法所在的类)是整个…...

[CISCN 2019华东南]Web11
[CISCN 2019华东南]Web11 给了两个链接但是都无法访问 这里我们直接抓包试一下 我们插入X-Forwarded-For:127.0.0.1 发现可以修改了右上角的IP地址,从而可以进行注入 {$smarty.version} 查看版本号 if标签执行PHP命令 {if phpinfo()}{/if} 查看协议 {if system(…...
Cypress内存溢出奔溃问题汇总
内存溢出报错信息 <--- Last few GCs ---> [196:0xe58001bc000] 683925 ms: Scavenge 1870.7 (1969.9) -> 1865.6 (1969.9) MB, 6.07 / 0.00 ms (average mu 0.359, current mu 0.444) task; [196:0xe58001bc000] 683999 ms: Scavenge 1872.4 (1969.9) -> 1867.1…...
树莓派4B--OpenCV安装踩坑
报错: Source directory: /tmp/pip-install-pv7l9r25/opencv-python_08fdf5a130a5429f89b0e0eaab39a329 Working directory: /tmp/pip-install-pv7l9r25/opencv-python_08fdf5a130a5429f89b0e0eaab39a329/_skbuild/linux-armv7l-3.7/cmake-build Please check the i…...

电子电气架构 --- 面向服务的汽车诊断架构
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…...

Pytest --capture 参数详解:如何控制测试执行过程中的输出行为
--capture 选项用于控制测试用例执行过程中标准输出(stdout)和标准错误输出(stderr)的捕获行为。 --capture 的选项值: fd(默认) 捕获文件描述符级别的输出(stdout 和 stderr&#x…...

IS-IS的原理
IS-IS的基本概念: 概述: IS-IS,中间系统到中间系统,是ISO国际标准化组织为它的无连接网络协议设计的一种动态路由协议 IS-IS支持CLNP网络和IP网络,采用数据链路层封装,区别于ospf只支持IP网络࿰…...

C++(4个类型转换)
1. C语言中的类型转换 1. 隐式 类型转换: 具有相近的类型才能进行互相转换,如:int,char,double都表示数值。 2. 强制类型转换:能隐式类型转换就能强制类型转换,隐式类型之间的转换类型强相关,强制类型转换…...
Ubuntu20.04安装NVIDIA显卡驱动
Ubuntu20.04安装NVIDIA显卡驱动 参考资料:https://blog.csdn.net/weixin_39244242/article/details/136282614?fromshareblogdetail&sharetypeblogdetail&sharerId136282614&sharereferPC&sharesourceqq_37397652&sharefromfrom_link 成功配置…...
速盾:介绍一下高防cdn的缓存响应事什么功能?
高防CDN(Content Delivery Network)是一种基于分布式缓存技术的网络加速服务,能够提供强大的缓存响应功能。它的缓存响应功能主要包括缓存加速和智能缓存两个方面。 首先,高防CDN的缓存加速功能是指通过在全球范围内部署大量的缓…...

Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...