react_web自定义组件_多类型Modal_搜索栏Search
目录
一、带输入框的Modal
二、提示框Modal
三、搜索栏Search
在做项目时引入一些现成的UI组件,但是如果和设计图冲突太大,更改时很麻烦,如果自己写一个通用组件其实也就几十分钟或者几个小时,而且更具UI设计更改也比较好更改,下面是两个简单的通用组件。
采用 react+ts+scss 进行开发。
如果你没有react+ts+scss项目,请看这个文章。
react项目https://blog.csdn.net/zxy19931069161/article/details/140117004?spm=1001.2014.3001.5501react项目这个文章顶部有一个现成的后台项目,可以这个基础上测试组件。
下面开始测试组件:
在src文件夹下新建components文件夹,用来放所有组件。
一、带输入框的Modal
效果如下,自行更改特别方便,内容:
在components文件夹下新建文件夹modalInput,modalInput文件夹下新建文件index.tsx和index.scss。
组件代码:
index.tsx
import './index.scss';
// 需要一个x,关闭图片,记得将图片放在这个路径下assets/images/,图片叫这个名字 icon-delete.png
import Delete from '../../assets/images/icon-delete.png'
import { useState } from "react";function ModalInput(props: any) {// 输入的文字,初始值为父元素传过来的值 props.systemNameData// const [inputValueData, setInputValue] = useState(props.systemNameData)// 输入的文字,初始值为空字符串const [inputValueData, setInputValue] = useState('')/*** 取消*/function cancleClick() {//执行父组件方法,关闭弹窗并将用户输入的值传给父组件props.sendValueToFather(false, '');setInputValue('')}/*** 确定*/function sureClick() {props.sendValueToFather(false, inputValueData);setInputValue('')}/*** 获得输入框输入的文字* @param event input输入事件*/function inputValue(event: any) {setInputValue(event.target.value)}return (<div className='modal-input-box'><div className="modal-input-content"><div className="modal-title">应用名称</div><img className="modal-delete" src={Delete} alt="关闭" onClick={cancleClick} /><div className="modal-line"></div><div className="modal-content"><div className="content-title">应用名称</div><input className="content-input" type="text" placeholder='请输入应用名称' onChange={inputValue} value={inputValueData} /></div><div className="modal-cacle" onClick={cancleClick}>取消</div><div className="modal-sure" onClick={sureClick}>确定</div></div></div>);
}export default ModalInput;
index.scss
.modal-input-box {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.4);z-index: 99;.modal-input-content {width: 560px;padding: 24px 24px 58px 24px;border-radius: 12px;background: #FFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box;.modal-title {color: #1E201F;font-size: 16px;line-height: 24px;letter-spacing: -0.01px;font-weight: bold;}.modal-delete {width: 24px;height: 24px;position: absolute;top: 24px;right: 24px;cursor: pointer;}.modal-line {width: 560px;height: 1px;background: #EFF2F9;position: absolute;top: 64px;left: 0;}.modal-content {width: 512px;padding: 32px 0;position: relative;.content-title {font-size: 14px;color: #505553;margin-left: 38px;padding-top: 8px;}.content-input {width: 360px;height: 34px;line-height: 34px;font-size: 14px;position: absolute;top: 32px;left: 114px;padding: 2px 10px 0px 10px;margin: 0;border-radius: 6px;border: 1px solid #E8ECEB;}input:focus {outline: 1px solid #00b498;border-radius: 4px;}input:hover {outline: 1px solid #00b498;border-radius: 4px;}input::placeholder {color: #A7AAA8;}}.modal-cacle {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #DCDFE6;font-size: 14px;position: absolute;bottom: 24px;right: 112px;cursor: pointer;&:hover {color: #00B498;border: 1px solid #00B498;}}.modal-sure {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #00B498;font-size: 14px;position: absolute;bottom: 24px;right: 24px;background-color: #00B498;color: #fff;cursor: pointer;&:hover {background: #1BCEB2;}}}
}
父组件引用时:
import ModalInput from "../.././components/modalInput";
import { useState } from "react";function Home() {// 系统名称输入弹窗是否显示const [isShowModal, setIsShowModal] = useState(false)// 系统名称const [systemName, setSystemName] = useState('');/*** 系统名称输入弹窗,子元素给父元素传的,用户输入的内容* @param param 是否关闭弹窗* @param data 用户输入的内容*/function getValueFromSon(param: boolean, data: string) {setIsShowModal(param);if (data !== '') {setSystemName(data);// 传给后端,并刷新获取信息数据接口}}return (<div>{isShowModal ? <ModalInput isShow={isShowModal} systemNameData={systemName} sendValueToFather={getValueFromSon}></ModalInput> : ''}</div>);
}export default Home;
二、提示框Modal
在components文件夹下新建文件夹modalTip,modalTip文件夹下新建文件index.tsx和index.scss。
组件代码:
index.tsx
import './index.scss';
// 替换成自己的提示图标
import Delete from '../../assets/images/icon-delete.png' //右上角关闭图标
import Question from '../../assets/images/icon-question.png'//左上角弹窗类型,提问
import Error from '../../assets/images/icon-error.png'//左上角弹窗类型,错误function ModalInput(props: any) {// 提示弹窗类型,可以自行添加//error 错误//question 提问//none 没有// 父元素传过来的值let data = {type: props.type,// 弹窗类型,根据类型显示图标(错误/提问)title: props.title,// 标题content: props.content,//内容}/*** 取消*/function cancleClick() {props.sendValueToFather(false);}/*** 确定*/function sureClick() {props.sendValueToFather(true);}return (<div className='modal-input-box'><div className="modal-input-content"><div className="left-title">{data.type === "question" ? <img className="modal-tip" src={Question} alt="提示标志" /> : " "}{data.type === "error" ? <img className="modal-tip" src={Error} alt="提示标志" /> : " "}<div className="modal-title">{data.title}</div></div><img className="modal-delete" src={Delete} alt="关闭" onClick={cancleClick} /><div className="modal-content"><div className="content-text">{data.content}</div></div><div className="modal-cacle" onClick={cancleClick}>取消</div><div className="modal-sure" onClick={sureClick}>确定</div></div></div>);
}export default ModalInput;
index.scss
.modal-input-box {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.4);z-index: 99;.modal-input-content {width: 400px;padding: 24px 24px 58px 24px;border-radius: 12px;background: #FFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box;.left-title {height: 24px;line-height: 24px;.modal-tip {width: 24px;height: 24px;margin-right: 6px;float: left;}.modal-title {display: inline;color: #1E201F;font-size: 16px;letter-spacing: -0.01px;font-weight: bold;float: left;}}.modal-delete {width: 24px;height: 24px;position: absolute;top: 24px;right: 24px;cursor: pointer;}.modal-content {width: 512px;padding: 14px 0 24px 0;position: relative;.content-text {width: 348px;font-size: 14px;color: #666;padding-top: 8px;word-break: break-all;text-align: justify;text-justify: inter-word;line-height: 22px;}}.modal-cacle {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #DCDFE6;font-size: 14px;position: absolute;bottom: 24px;right: 112px;cursor: pointer;&:hover {color: #00B498;border: 1px solid #00B498;}}.modal-sure {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #00B498;font-size: 14px;position: absolute;bottom: 24px;right: 24px;background-color: #00B498;color: #fff;cursor: pointer;&:hover {background: #1BCEB2;}}}
}
组件调用:
import ModalTip from "../.././components/modalTip";
import { useState } from "react";function Home() {// 系统名称输入弹窗是否显示const [isShowModal, setIsShowModal] = useState(false)/*** 子元素传给父元素的结果* @param param 取消/确定*/function getValueFromSon(param: boolean) {setIsShowModal(false);if (param) {//用户点击确定}else{//用户点击取消}}return (<div>{isShowModal ? <ModalTip type={'question'} title={"确定删除吗?"} content={"删除后不可恢复哦~"} sendValueToFather={getValueFromSon}></ModalTip> : ''}</div>);
}export default Home;
三、搜索栏Search
在components文件夹下新建文件夹search,search文件夹下新建文件index.tsx和index.scss。
组件代码:
index.tsx
import './index.scss';
import { useState } from "react";
// 搜索图标,记得添加
import SearchIcon from "../../assets/images/icon-search.png";function Search(props: any) {const [inputValueData, setInputValue] = useState("")/*** 获得输入框输入的文字* @param event input输入事件*/function inputValue(event: any) {setInputValue(event.target.value)}/*** 用户点击了键盘回车按钮* @param e 元素信息*/function search(e: any) {if (e.keyCode === 13) {toFather()// 用户按下回车后,让input元素失去焦点var inputElement: any = document.getElementById('myInput');inputElement.blur();}}/*** 将用户输入的内容传给父元素*/function toFather() {props.searchValue(inputValueData)}return (<div><input id="myInput" className="edu-Manage-input" type="text" placeholder={props.placeholder} onChange={inputValue} value={inputValueData} onKeyUp={search} /><img className="edu-Manage-search" src={SearchIcon} alt="搜索" onClick={toFather} /></div>);
}export default Search;
index.scss
.edu-Manage-input {width: 240px;height: 34px;line-height: 34px;font-size: 14px;padding: 2px 0px 0px 34px;margin: 0;border-radius: 6px;border: 1px solid #E8ECEB;cursor: pointer;
}.edu-Manage-search {width: 14px;height: 14px;position: absolute;left: 28px;top: 28px;cursor: pointer;z-index: 99;&:hover {input {outline: 1px solid #00b498;border-radius: 4px;}}
}input:focus {outline: 1px solid #00b498;border-radius: 4px;
}input:hover {outline: 1px solid #00b498;border-radius: 4px;
}input::placeholder {color: #A7AAA8;
}
组件调用:
import Search from "../.././components/search";function Home() {/*** 搜索组件返回用户搜索的字符串* @param value 用户搜索的字符串*/function getSearchData(value: string) {console.log(value)}return (<div><Search placeholder="请输入姓名" searchValue={getSearchData}></Search></div>);
}export default Home;
相关文章:

react_web自定义组件_多类型Modal_搜索栏Search
目录 一、带输入框的Modal 二、提示框Modal 三、搜索栏Search 在做项目时引入一些现成的UI组件,但是如果和设计图冲突太大,更改时很麻烦,如果自己写一个通用组件其实也就几十分钟或者几个小时,而且更具UI设计更改也比较好更改&…...

Apache Flink架构介绍
目录 一、Apache Flink架构组件栈 1.1 概述 1.2 架构图 1.3 架构分层组件说明 1.3.1 物理部署层 1.3.2 Runtime 核心层 1.3.3 API & Libraries层 二、Flink运行时架构 2.1 概述 2.2 架构图 2.3 架构角色和组件 2.3.1 Flink Clients客户端 2.3.2 JobManager 2.…...
华为HCIP Datacom H12-821 卷28
1.单选题 下面是一台路由器的部分配置,关于该部分配置描述正确的是,[HUAWEI]ip ip-prefx pl permit 10.0.192.0 8greater-equal17 less-equal 18 A、10.0.192.0/8网段内,掩码长度为18的路由会匹配到该前缀列表,匹配规则为允许 B、10.0.192.0/8网段内掩码长度为21的路…...

安装Nginx以及简单使用 —— windows系统
一、背景 Nginx是一个很强大的高性能Web和反向代理服务,也是一种轻量级的Web服务器,可以作为独立的服务器部署网站,应用非常广泛,特别是现在前后端分离的情况下。而在开发过程中,我们常常需要在window系统下使用Nginx作…...

【UE5.3】笔记8 添加碰撞,检测碰撞
添加碰撞 打开BP_Food,添加Box Collision组件,与unity类似: 调整Box Collision的大小到刚好包裹物体,通过调整缩放和盒体范围来控制大小,一般先调整缩放找个大概大小,然后调整盒体范围进行微调。 碰撞检测 添加好碰撞…...

丝滑流畅!使用kimi快速完成论文仿写
学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 今天的分享,我们将带大家探索一种新的学术写作技巧——使用Kimi进行论文仿写。本文将深入解析如何利用Kimi的智能辅助功能,提高论文写作的效率和质量,…...

【C++】认识使用string类
【C】STL中的string类 C语言中的字符串标准库中的string类string类成员变量string类的常用接口说明成员函数string(constructor构造函数)~string(destructor析构函数)默认赋值运算符重载函数 遍历string下标[ ]迭代器范围for反向迭代器 capacitysizelengthmax_sizeresizecapaci…...
如何在 Odoo 16 中对 Many2Many 字段使用 Group by
Many2many 字段与 Many2one 字段类似,因为它们在模型之间建立了新的关系。在Odoo 16中,您无法按 many2many 字段分组,因为可以使用 many2many 记录选择任何记录。当您使用 many2many 字段给出 group by 过滤器时,您将遇到断言错误。 介绍如何在 Odoo 16 中使用 Many2Many…...

PCL从理解到应用【03】KDTree 原理分析 | 案例分析 | 代码实现
前言 本文分析KDTree的原理,集合案例深入理解,同时提供源代码。 三个案例:K近邻搜索、半径内近邻搜索、近似最近邻搜索。方法对比,如下表所示: 特性K近邻搜索半径内近邻搜索近似最近邻搜索描述查找K个最近邻点查找指…...

Windows 11内置一键系统备份与还原 轻松替代Ghost
面对系统崩溃、恶意软件侵袭或其他不可预见因素导致的启动失败,Windows 7~Windows 11内置的系统映像功能能够迅速将您的系统恢复至健康状态,确保工作的连续性和数据的完整性。 Windows内置3种备份策略 U盘备份:便携且安全 打开“创建一个恢…...

leetCode-hot100-动态规划专题
动态规划 动态规划定义动态规划的核心思想动态规划的基本特征动态规划的基本思路例题322.零钱兑换53.最大子数组和72.编辑距离139.单词拆分62.不同路径63.不同路径Ⅱ64.最小路径和70.爬楼梯121.买卖股票的最佳时机152.乘积最大子数组 动态规划定义 动态规划(Dynami…...

【算法笔记自学】入门篇(2)——算法初步
4.1排序 自己写的题解 #include <stdio.h> #include <stdlib.h>void selectSort(int A[], int n) {for(int i 0; i < n - 1; i) { // 修正索引范围int k i;for(int j i 1; j < n; j) { // 修正索引范围if(A[j] < A[k]) {k j;}}if (k ! i) { // 仅在…...

Redis基础教程(六):redis 哈希(Hash)
💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 💝Ὁ…...

鸿蒙开发设备管理:【@ohos.account.appAccount (应用帐号管理)】
应用帐号管理 说明: 本模块首批接口从API version 7开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。开发前请熟悉鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 导入模…...

java项目自定义打印日志,打印请求方式,参数用时等
1.相关依赖 <!-- 私人工具包 --><dependency><groupId>cn.changeforyou</groupId><artifactId>location</artifactId><version>1.13-SNAPSHOT</version></dependency><!-- hutool工具依赖 --><dependency>…...

03:EDA的进阶使用
使用EDA设计一个38译码器电路和245放大电路 1、38译码器1.1、查看74HC138芯片数据1.2、电路设计 2、245放大电路2.1、查看数据手册2.2、设计电路 3、绘制PCB3.1、导入3.2、放置3.3、飞线3.4、特殊方式连接GND3.5、泪滴3.6、配置丝印和划分区域3.7、添加typc接口供电 1、38译码器…...
Linux/Unix系统指令:(tar压缩和解压)
tar 是一个在Linux和Unix系统中用于创建和处理归档文件的命令。 下面是tar命令的详细用法,包括它的所有常用选项和一些示例。 基本语法 tar [选项] [归档文件] [文件或目录]常用选项 基本操作 -c:创建一个新的归档文件(create)…...
MySQL 日期和时间函数知识点总结
引言 在数据库管理和开发中,日期查询是一项基础且频繁使用的功能。MySQL提供了丰富的日期和时间处理函数,使得我们能够灵活地进行日期查询和数据处理。本文将详细介绍MySQL中关于日期查询的几个重要知识点,并附上具体的案例。 1. MySQL的日…...

鸿蒙登录页面及页面跳转的设计
目录 任务目标任务分析任务实施1.新建工程项目HMLogin2.设计登录页面Index.visual3.设计第二个页面SecondPage4.修改Index.ets代码5.修改SecondPage.ets代码6.运行工程 任务目标 设计一个简单的登录页面,要求可以将第一页的登录信息,传递到第二个页面&a…...
【居家养老实训室】:看中医保健在养老中的应用
本文以居家养老实训室为视角,深入探讨了中医保健在养老中的应用。通过对中医保健理念、常用方法以及在居家养老中的具体实践进行分析,阐述了其在改善老年人健康状况、提高生活质量方面的重要作用。同时,也指出了目前应用中存在的问题…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的,比GNOME简单得多! 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...

Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...

iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...