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

javascript 复制代码
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

css 复制代码
.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;
            }
        }
    }
}

父组件引用时:

javascript 复制代码
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

javascript 复制代码
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

css 复制代码
.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;
            }
        }
    }
}

组件调用:

javascript 复制代码
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

javascript 复制代码
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

css 复制代码
.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;
}

组件调用:

javascript 复制代码
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;
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试