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…...
【居家养老实训室】:看中医保健在养老中的应用
本文以居家养老实训室为视角,深入探讨了中医保健在养老中的应用。通过对中医保健理念、常用方法以及在居家养老中的具体实践进行分析,阐述了其在改善老年人健康状况、提高生活质量方面的重要作用。同时,也指出了目前应用中存在的问题…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数(接收函数) sendto函数(发送函数) 五、网络编程之 UDP 用…...

热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露,数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据,严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能,但SEMR…...

Vue3 PC端 UI组件库我更推荐Naive UI
一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用,前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率,还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库(Naive UI、Element …...

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
摘要:在消费市场竞争日益激烈的当下,传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序,探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式,分析沉浸式体验的优势与价值…...