当前位置: 首页 > news >正文

手写顺序流程图组件

效果图

完整代码

<template><div><div class="container" :style="{ width: `${spacingX * (colNum - 1) + itemWidth * colNum}px` }"><divv-for="(item, i) in recordList":key="i"class="list-box":style="{marginTop: i < colNum ? '0' : `${spacingY}px`,marginRight: i % (2 * colNum) === colNum - 1 || i % (2 * colNum) === colNum ? '0' : `${spacingX}px`,order: orderList[i] && orderList[i].order,visibility: orderList[i] && orderList[i].itemHide ? 'hidden' : 'visible'}"><div class="cont-box" :style="{ width: itemWidth + 'px', height: itemHeight + 'px', backgroundColor: '#16a085' }">{{ item }}</div><div v-if="i !== listLen - 1" class="arrow-box" :style="arrowStyle[orderList[i] && orderList[i].arrow]"><div class="line-tip" /><div class="arrow-tip" /></div></div></div></div>
</template><script>
export default {name: 'FlowPath',data() {return {itemWidth: 75, // item宽度itemHeight: 75, // item高度colNum: 1, // 显示的列数spacingX: 40, // 列间距spacingY: 40, // 行间距rawList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18], // 原始数据recordList: [], // 列表数据arrowStyle: { right: {}, down: {}, left: {}}, // 箭头样式orderList: [], // 列表排序序号listLen: '' // 列表数据长度}},mounted() {this.listLen = this.rawList.lengththis.initFun() // 初始化方法window.addEventListener('resize', this.initFun) // 页面宽度变化监听器},beforeDestroy() {window.removeEventListener('resize', this.initFun) // 组件销毁时移除 resize 事件监听器,避免内存泄漏},methods: {/* 初始化方法 */initFun() {const pageWidth = document.documentElement.clientWidth // 获取页面宽度(可视区域宽度)const minTotalWidth = this.itemWidth + this.spacingX // 每个 item(包含间距) 期望的最小总宽度为 minTotalWidth(单位:px)const newNum = Math.floor(pageWidth / minTotalWidth) // 计算 colNum,向下取整this.colNum = Math.max(newNum, 1) // 限制 colNum 的最小值,比如至少为 1 列// 更新箭头样式和列表样式,因为 colNum 变化了,相关布局依赖 colNum 列数this.setArrowStyle() // 设置箭头样式this.setOrderList() // 设置列表样式},/* 设置箭头样式 */setArrowStyle() {const left = {width: this.spacingX + 'px',top: this.itemHeight / 2 + 'px',left: -this.spacingX + 'px'}const right = {width: this.spacingX + 'px',top: this.itemHeight / 2 + 'px',right: -this.spacingX + 'px',transform: 'rotate(180deg)'}const down = {width: this.spacingY + 'px',left: this.itemWidth / 2 + 'px',bottom: -this.spacingY + 'px',transform: 'rotate(-90deg)',transformOrigin: 0}this.arrowStyle = { right, left, down }},/* 设置列表样式 */setOrderList() {this.recordList = JSON.parse(JSON.stringify(this.rawList))this.orderList = [] // 列表排序序号const n = this.colNum // 显示的列数const dbn = n * 2 // 列数 * 2// 添加占位的 item 项const arrLen = this.listLenconst remainder = (arrLen - 1) % dbnif (remainder >= n && remainder < dbn) {const diff = dbn - 1 - remainderfor (let i = 0; i < diff; i++) {this.orderList[arrLen + i] = {itemHide: true,order: arrLen + i}this.recordList[arrLen + i] = null}}// 设置 item 的箭头方向和顺序this.recordList.map((item, index) => {const i = index % dbn	// 余数if (i >= 0 && i < n) {this.orderList[index] = {order: index,arrow: i !== n - 1 ? 'right' : 'down'} // 不用改变顺序} else {this.orderList[index] = {order: index + ((n - 1) - 2 * (i - n)), // i - n 是与最近一侧的距离arrow: i !== dbn - 1 ? 'left' : 'down',itemHide: this.orderList[index]?.itemHide} // 需要改变顺序}})}}
}
</script><style scoped lang="scss">
.container {display: flex;flex-wrap: wrap;box-sizing: border-box;overflow: hidden;.list-box {position: relative;font-size: 20px;box-sizing: border-box;.cont-box {}}
}
/* 箭头区域 */
.arrow-box {$bgColor: #303133;position: absolute;// 线条样式.line-tip {position: absolute;top: 50%;transform: translateY(-50%);left: 3px;width: 90%;height: 2px;background-color: $bgColor;}// 箭头样式.arrow-tip {position: absolute;top: 50%;transform: translateY(-50%);left: 1px;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 8px solid $bgColor;}
}
</style>

相关文章:

手写顺序流程图组件

效果图 完整代码 <template><div><div class"container" :style"{ width: ${spacingX * (colNum - 1) itemWidth * colNum}px }"><divv-for"(item, i) in recordList":key"i"class"list-box":style&…...

适配器模式概述

大体介绍 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;其核心目的是通过提供一个适配器类来使得原本接口不兼容的类可以一起工作。它通过将一个类的接口转换成客户端所期望的接口&#xff0c;使得原本因接口不兼容而无法一起工作的类可…...

Logo设计免费生成器:轻松设计个性化标志

在当今这个信息爆炸的时代&#xff0c;一个好的Logo标志已经成为品牌和企业的名片。它不仅是品牌的象征&#xff0c;也是企业文化和价值观的体现。然而&#xff0c;很多初创企业或小型团队往往因为预算有限&#xff0c;无法请专业的设计师来打造专属的Logo。这时候&#xff0c;…...

智能停车场车牌识别计费系统

作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、多年校企合作经验&#xff0c;被多个学校常年聘为校外企业导师&#xff0c;指导学生毕业设计并参与学生毕业答辩指导&#xff0c;…...

谷歌开通第三方平台OAuth登录及Java对接步骤

调研起因&#xff1a; 当然还是因为手头的海外项目&#xff0c;用户注册通常要用邮箱&#xff0c;正常流程需要给用户邮箱发送验证码&#xff0c;再让用户输入密码进行注册。 为了简化流程&#xff0c;让用户使用谷歌邮箱一键完成注册或登录&#xff0c; 我们直接获取谷歌邮箱、…...

人体:精妙绝伦的生命之躯

人体&#xff1a;精妙绝伦的生命之躯 在浩瀚宇宙中&#xff0c;人体犹如一颗璀璨的明珠&#xff0c;是自然界最伟大的杰作之一。它是一个高度复杂且精妙绝伦的有机系统&#xff0c;承载着生命的奥秘与奇迹&#xff0c;展现出令人惊叹的适应性、协调性和自我修复能力。从微观的…...

python的urllib模块和http模块

1.python的urllib库用于操作网页&#xff0c;并对网页内容进行处理 urllib包有如下模块&#xff1a; urllib.request&#xff1a;打开和读取URL urllib.error&#xff1a; 包含urllib.request抛出的异常 urllib.parse&#xff1a; 解析URL urllib.robotparser&#xff1…...

Java [后端] 开发日常记录(1)

目录 1、常用的注解 2、对字符串的处理 3、对JSON串的处理 -- The End -- 详细如下&#xff1a; 1、常用的注解 若返回的字段中有NUll&#xff0c;则不返回 JsonInclude(value JsonInclude.Include.NON_NULL) //在实体类中添加这个注解 JsonInclude(JsonInclude.Include.NON…...

jetbrain 安装 copilot

问题一&#xff1a;Sign in failed. Reason: Request signInInitiate failed with message: Request to /github.com/login/device/code> timed out after 30000ms, request id: 11, error code: -32603 解决方案&#xff1a; 参考资料&#xff1a;https://github.com/orgs/…...

万里数据库GreatSQL监控解析

GreatSQL是MySQL的一个分支&#xff0c;专注于提升MGR&#xff08;MySQL Group Replication&#xff09;的可靠性及性能。乐维监控平台可以有效地监控GreatSQL&#xff0c;帮助用户及时发现并解决潜在的性能问题。 通过在GreatSQL服务器上安装监控代理&#xff0c;收集数据库性…...

OpenCV-Python实战(9)——滤波降噪

一、均值滤波器 cv2.blur() img cv2.blur(src*,ksize*,anchor*,borderType*)img&#xff1a;目标图像。 src&#xff1a;原始图像。 ksize&#xff1a;滤波核大小&#xff0c;&#xff08;width&#xff0c;height&#xff09;。 anchor&#xff1a;滤波核锚点&#xff0c…...

Pytorch | 利用DTA针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用DTA针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集DTA介绍算法流程 DTA代码实现DTA算法实现攻击效果 代码汇总dta.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器&#xff1a; Pytorch | 从零构建AlexNet对CIFAR10进行分类 Pytorch | 从零构建…...

Linux性能测试简介

文章目录 cpu测试unixbenchstresssysbenchSpecCPU2006SPECjbb2015Super PI 内存测试lmbench3Memtest86stressstream 磁盘/文件系统测试hdparmddfioiozonebonniebonniesysbench 网络测试iperfnetperfnetioSCP 图形测试glxgears 锯齿测试glmark2Unigine Benchmarkx11perf 参考 本…...

Kile5支持包的安装

安装STM32器件支持包 两种方式 离线安装 在线安装 离线 在线 所有可以用Kile软件来开发的芯片都可以找到&#xff0c;就是网速比较慢...

【Ubuntu 系统 之 开启远程桌面SSH登录】

【Ubuntu 系统 之 开启远程桌面&SSH登录】 一、开启 SSH 登录二、开启远程桌面1、更新包管理器并安装 xrdp1.1、遇到错误1.2、解决方法 2、安装桌面环境&#xff08;如果服务器上没有 GUI&#xff09;3、配置 xrdp 使用默认的 GNOME 桌面环境4、配置防火墙允许远程桌面连接…...

MySQL 索引分类及区别与特点

MySQL 索引分类及区别与特点 索引是数据库中用于加速数据检索的数据结构。MySQL 支持多种类型的索引&#xff0c;每种索引有其特定的使用场景和特点。以下是 MySQL 中常见的索引分类及其区别与特点&#xff1a; 1. 按数据结构分类 (1) BTree 索引 特点&#xff1a; 默认的索…...

对中文乱码的理解,遇到乱码该怎么办。

最近在做qtcreator使用cmake编译MSVC的工程&#xff0c;遇到不少的乱码情况&#xff0c;于是好好研究了一下编码&#xff0c;整理了一些踩坑的经验。 一、中文乱码的来源 目前常见到的中文编码其实就两种&#xff0c;UTF8和GBK。 我们遇到的绝大多数乱码&#xff0c;就是系统…...

《机器学习》从入门到实战——逻辑回归

目录 一、简介 二、逻辑回归的原理 1、线性回归部分 2、逻辑函数&#xff08;Sigmoid函数&#xff09; 3、分类决策 4、转换为概率的形式使用似然函数求解 5、对数似然函数 ​编辑 6、转换为梯度下降任务 三、逻辑回归拓展知识 1、数据标准化 &#xff08;1&#xf…...

svn不能添加.a文件

解决办法 在home目录下有一个.subversion文件夹&#xff0c;文件夹内有个config文件&#xff0c;里面可以修改过滤的文件类型 在使用命令svn add的时候带上参数–no-ignore&#xff0c;这样就会不顾config中的规则&#xff0c;将指定路径的文件都添加到版本库中 rockyrocky:/e…...

23.Java 时间日期扩展(新时间日期、新时间日期格式化与解析、时间戳、计算时间日期差、时间矫正器、时区)

一、旧时间日期问题 在 java.util 和 java.sql 包下都有时间日期类 java.util.Date 类包含时间和日期 java.sql.Date 类值包含日期 java.util.Date 类线程不安全&#xff0c;Date 对象可变 时间日期格式化类在 java.text 包下 时区处理困难&#xff0c;并不支持国际化&…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...