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

挑战用React封装100个组件【004】

项目地址
https://github.com/hismeyy/react-component-100

组件描述
组件适用于展示图片的地方,提供了small,medium,large三种大小。可以删除图片,也可以全屏预览图片。

样式展示

在这里插入图片描述
在这里插入图片描述

前置依赖

今天我们的这个挑战需要用用到了 react-icons 依赖,因此,我们需要先安装它。

# 使用 npm
npm install react-icons# 或者使用 yarn
yarn add react-icons

使用的话,大家可以看这个网站。大家进去可以找需要的图标。具体使用里面有介绍,非常简单。
react-icons 图标
好了,下面我们展示代码。

代码展示

Img.tsx
import { useState } from 'react'
import './Img.css'
import { MdClose } from 'react-icons/md';interface ImgProps {src: string;alt: string;size?: 'small' | 'medium' | 'large';onClose?: () => void;
}const Img = ({ src, alt, size = 'small', onClose }: ImgProps) => {const [showPreview, setShowPreview] = useState(false);const [visible, setVisible] = useState(true);const handleClose = () => {setVisible(false);if (onClose) {onClose();}};if (!visible) return null;return (<div className={`img-container img-${size}`}><button className={`img-close img-close-${size}`} onClick={handleClose}><MdClose /></button><div className={`img img-${size}`} onClick={() => setShowPreview(true)}><img src={src} alt={alt} /></div>{showPreview && (<div className="img-preview-overlay" onClick={() => setShowPreview(false)}><div className="img-preview-content"><img src={src} alt={alt} /></div></div>)}</div>)
}export default Img
Img.css
.img-container {position: relative;
}.img {overflow: hidden;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 5%;
}.img-small {width: 80px;height: 80px;font-size: 10px;
}.img-medium {width: 160px;height: 160px;font-size: 14px;
}.img-large {width: 240px;height: 240px;font-size: 16px;
}.img img {width: 100%;height: 100%;object-fit: cover;object-position: center;
}.img::after {content: "预 览";display: flex;align-items: center;justify-content: center;color: #fff;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);opacity: 0;border-radius: 5%;transition: opacity 0.3s ease;
}.img:hover::after {opacity: 1;
}.img-preview-overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.9);display: flex;align-items: center;justify-content: center;z-index: 1000;animation: fadeIn 0.3s ease;
}.img-preview-content {max-width: 90%;max-height: 90vh;position: relative;
}.img-preview-content img {max-width: 100%;max-height: 90vh;object-fit: contain;
}@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}.img-close {all: unset;background-color: rgb(114, 114, 114);border-radius: 50%;color: #fff;font-size: 20px;cursor: pointer;display: flex;align-items: center;justify-content: center;font-weight: bold;position: absolute;transition: all 0.3s ease;z-index: 5;
}.img-close:hover {background-color: rgb(82, 82, 82);transform: scale(1.1);
}.img-close-small {width: 10px;height: 10px;top: -2px;right: -2px;font-size: 10px;
}.img-close-medium {width: 15px;height: 15px;top: -3px;right: -3px;font-size: 15px;
}.img-close-large {width: 20px;height: 20px;top: -5px;right: -5px;font-size: 16px;
}

使用

App.tsx
import './App.css'
import Img from './components/img/img01/Img'function App() {const handleImageClose = () => {console.log('图片被关闭了');};return (<><Imgsrc="https://picsum.photos/500/500"alt="Random image"size="large"onClose={handleImageClose}/></>);
}export default App

相关文章:

挑战用React封装100个组件【004】

项目地址 https://github.com/hismeyy/react-component-100 组件描述 组件适用于展示图片的地方&#xff0c;提供了small&#xff0c;medium&#xff0c;large三种大小。可以删除图片&#xff0c;也可以全屏预览图片。 样式展示 前置依赖 今天我们的这个挑战需要用用到了…...

vue elementui layout布局组件实现规则的弹性布局

背景&#xff1a;遇到在一个容器里&#xff0c;采用弹性盒布局的时候&#xff0c;如果元素个数改变&#xff0c;元素的排列会错乱。 解决方式 方式一&#xff1a;之前遇到的时候&#xff0c;是采用计算元素个数的方式&#xff0c;采用透明元素补齐的方式&#xff08;比如一个有…...

SpringBoot Web 开发请求参数

SpringBoot Web 开发请求参数 简单的 web 请求: @RestController public class HelloController {@RequestMapping("sayHello")public String sayHello(){System.out.println("Hello World");return "hello world";} }获取请求参数 简单参数…...

python7学习笔记-循环、迭代、pass

九九乘法表-while循环 right 1 while right < 9:left 1while left < right:print(f{left}x{right}{left * right},end\t)left 1print()right 1 # #效果&#xff1a; #1x11 #1x22 2x24 #1x33 2x36 3x39 #1x44 2x48 3x412 4x416 #1x55 2x510 3x515 4x520 5x525 #…...

LeetCode78:子集

链接&#xff1a;78. 子集 假设我们要求[1, 2, 3]的子集&#xff1a; 我们知道[1, 2]的子集是A&#xff1a; 而[1, 2, 3]就是比[1, 2]多了一个元素3&#xff1b;所以将3加入到上述A中的每个集合中&#xff0c;得到一个新集合B&#xff1a; 结论&#xff1a;[1, 2, 3]的子集就…...

Linux 安装scala

文章目录 Linux 安装scala下载环境变量配置 Linux 安装scala 前提linux需要已经安装好JDK&#xff08;JDK安装&#xff09;&#xff0c;Scala对JDK版本有明确的要求。通常&#xff0c;Scala的稳定版本要求JDK版本不低于1.8。例如&#xff0c;Scala 2.11.8和2.12.7版本都要求JD…...

重生之我在异世界学编程之C语言:深入指针篇(上)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文&#xff08;1&#xff09;内置数…...

linux centos7 yum命令失效

linux centos7 yum命令失效 Centos7使用yum命令失效&#xff0c;报错&#xff1a;Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infrastock error was 14: curl#6 - “Could not resolve host: mirrorlist.centos.or…...

mac访达打开终端

选择文件夹打开 选中文件夹&#xff0c;然后右键即可&#xff1a; 在当前文件夹打开 在访达的当前文件夹长按option键 左下角出现当前文件夹路径 右键即可打开终端...

【MySQL 进阶之路】索引的使用

5.索引的使用规则 在数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;索引是提高查询效率的关键机制之一。MySQL索引优化是指通过设计、调整和选择合适的索引策略&#xff0c;以提高数据库的查询性能和降低资源消耗。以下是一些关键的索引使用规则&#xff1a; 1. …...

网络编程相关 API 学习

目录 1. 网络编程中的基本概念 2. UDP 的 socket api 的使用 (1) DatagramSocket API (2) DatagramPacket API (3) InetSocketAddress API (4) 使用 UDP 的 socket api 3. TCP 的 socket api 的使用 (1) ServerSocket API (2) Socket API 1. 网络编程中的基本概念 客…...

python使用python-docx处理word

文章目录 一、python-docx简介二、基本使用1、新建与保存word2、写入Word&#xff08;1&#xff09;打开文档&#xff08;2&#xff09;添加标题&#xff08;3&#xff09;添加段落&#xff08;4&#xff09;添加文字块&#xff08;5&#xff09;添加图片&#xff08;6&#xf…...

【笔记2-1】ESP32:基于vscode的espidf插件的开发环境搭建

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…...

集成网关 -- 新节点的开发说明

在node-red中&#xff0c;nVisual节点可以帮助我们更快快简捷的完成新的功能&#xff0c;今天我来分享一下关于node-Red中关于nVisual新节点开发基础教程。 首先来看一下基本node-red节点文件目录&#xff0c;当前新开发的7个节点都放在了“node-red\packages\node_modulesno…...

【Gitlab】CICD使用minio作为分布式缓存

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…...

️️耗时一周,肝了一个超丝滑的卡盒小程序

前言 先看看成品效果&#xff1a; 在上个月&#xff0c;我出于提升自己的英语造句能力的目的&#xff0c;想要找一个阅读或者练习造句类的英语学习 APP&#xff0c;但是最终找了几个 APP 不是不太好用就是要付费。于是我转换思路&#xff0c;找到了一本书&#xff0c;叫《36…...

网络安全审计

网络安全审计是为了确保网络系统的安全性和完整性&#xff0c;防范潜在的网络攻击和数据泄露风险。 审计步骤&#xff1a; 1.确定审计目标&#xff1a;明确审计的目的和范围&#xff0c;例如审计网络设备、服务器、应用程序或数据库等。 2.收集信息&#xff1a;收集审计范围…...

论文:IoU Loss for 2D/3D Object Detection

摘要&#xff1a;在2D/3D目标检测任务中&#xff0c;IoU (Intersection-over- Union)作为一种评价指标&#xff0c;被广泛用于评价不同探测器在测试阶段的性能。然而&#xff0c;在训练阶段&#xff0c;通常采用常见的距离损失(如L1或L2)作为损失函数&#xff0c;以最小化预测值…...

2411mfc,修改按钮颜色

添加消息:ON_WM_CTLCOLOR() //在OnInitDialog()方法中添加{HWND hSatateWnd GetDlgItem(IDC_CHK)->GetSafeHwnd();SetWindowTheme(hSatateWnd, _T(""), _T(""));}头文件中: afx_msg HBRUSH OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor);HBRUSH O…...

互联网 Java 面试八股文汇总(2025 最新整理)

我分享的这份 Java 后端开发面试总结包含了 JavaOOP、Java 集合容器、Java 异常、并发编程、Java 反射、Java 序列化、JVM、Redis、Spring MVC、MyBatis、MySQL 数据库、消息中间件 MQ、Dubbo、Linux、ZooKeeper、 分布式 &数据结构与算法等 25 个专题技术点&#xff0c;都…...

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...