React封裝全屏彈框的方法

更新時間：2022年08月25日 14:44:52 作者：小劉加油！

這篇文章主要為大家詳細(xì)介紹了React封裝全屏彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了React封裝全屏彈框的具體代碼，供大家參考，具體內(nèi)容如下

web開發(fā)過程中，需要用到彈框的地方很多，有時候，產(chǎn)品經(jīng)理的原型是全屏彈框，而常用的組件庫里封裝的一般都不是全屏的。

如下圖所示：這就是一個全屏彈框。

廢話不多說，直接上代碼：

// ?FullScreen.tsx

import React, { memo, useEffect } from 'react';
import { Spin } from '@/components/antd';
import IconUrl from '@/assets/icon/closeIcon.png';
import './index.scss';


/*
?*全屏表格自適配組件
?*@title 標(biāo)題
?*@visible 是否顯示
?*@handleCancel 取消事件
?*@content 組件內(nèi)容
?*@loadding 狀態(tài)
?*/

function FullScreen({ title, visible, handleCancel, content, loadding = false }: any) {
? const collapsed = localStorage.getItem('collapsed');
? const collapse = collapsed ?? '1';

? useEffect(() => {
? ? return () => {
? ? ? localStorage.removeItem('collapsed');
? ? };
? }, []);
? return (
? ? visible && (
? ? ? ? <div id="commonModal" style={+collapse === 1 ? { left: 210,top:93 } : { left: 100,top:93 }}>
? ? ? ? ? {/*<!-- 頂部 -->*/}
? ? ? ? ? <div className="modalTop">
? ? ? ? ? ? <div className="modal_title">
? ? ? ? ? ? ? <div className="topTitle">{title}</div>
? ? ? ? ? ? </div>

? ? ? ? ? ? <img className="topIcon" onClick={handleCancel} src={IconUrl} alt="" />
? ? ? ? ? </div>
? ? ? ? ? <Spin spinning={loadding} tip="Loading..." size="large" delay={500}>
? ? ? ? ? ? <div className="modalMain">{content}</div>
? ? ? ? ? </Spin>
? ? ? ? </div>
? ? )
? );
}

export default memo(FullScreen);

這個是相關(guān)的css樣式 – index.scss

// index.scss
#commonModal {
? position: fixed;
? bottom: 0px;
? right: 0px;
? background: white;
? border-radius: 5px;
? // width: 100%;
? // height: 100%;
? // height: 95vh;
? z-index: 10;
? .modalTop {
? ? width: 100%;
? ? height: 46px;
? ? border-radius: 5px 5px 0 0;
? ? display: flex;
? ? background: white;
? ? justify-content: space-between;
? ? align-items: center;
? ? border-bottom: 1px solid #dbe3e5;
? ? box-sizing: border-box;
? ? padding: 0 20px;
? ? .modal_title {
? ? ? display: flex;
? ? ? align-items: center;
? ? ? .topTitle {
? ? ? ? color: #333545;
? ? ? ? font-weight: bold;
? ? ? ? font-size: 18px;
? ? ? }
? ? }

? ? .topIcon {
? ? ? width: 24px;
? ? ? height: 24px;
? ? ? cursor: pointer;
? ? }
? }
? .modalMain {
? ? height: 100%;
? ? padding-bottom: 30px;
? ? // height: calc(100vh - 80px);
? ? // height: calc(90vh - 120px);
? ? ::-webkit-scrollbar {
? ? ? // height: 8px;
? ? ? // width: 10px;
? ? }
? }
}
// .modal_mask {
// ? position: fixed;
// ? width: 100%;
// ? height: 100%;
// ? left: 0;
// ? top: 0;
// ? // background-color: rgba(0, 0, 0, 0.5);
// ? z-index: 10;
// }

在相關(guān)頁面中進(jìn)行使用：

import FullScreen from '@/components/FullScreen/FullScreen';

const test = (props) => {
?? ?return (
?? ??? ?<Fragment>
? ? ? ? ? ? <FullScreen loadding={isLoading} title={'新增'} content={content} visible={visible} handleCancel={handleCancel} />
? ? ? ? </Fragment>
?? ?)
}

content 一般是表單元素

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: