您现在的位置是：网站首页> 编程资料编程资料

React封装全屏弹框的方法_React_

2023-05-24 542人已围观

简介 React封装全屏弹框的方法_React_

本文实例为大家分享了React封装全屏弹框的具体代码，供大家参考，具体内容如下

web开发过程中，需要用到弹框的地方很多，有时候，产品经理的原型是全屏弹框，而常用的组件库里封装的一般都不是全屏的。

如下图所示：这就是一个全屏弹框。

废话不多说，直接上代码：

//  FullScreen.tsx import React, { memo, useEffect } from 'react'; import { Spin } from '@/components/antd'; import IconUrl from '@/assets/icon/closeIcon.png'; import './index.scss'; /*  *全屏表格自适配组件  *@title 标题  *@visible 是否显示  *@handleCancel 取消事件  *@content 组件内容  *@loadding 状态  */ 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 && (                    {/**/}                                       {title}
             
                        
                        {content}
                    
     )   ); } export default memo(FullScreen);

这个是相关的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; // }

在相关页面中进行使用：

import FullScreen from '@/components/FullScreen/FullScreen'; const test = (props) => {     return (                                    ) }

content 一般是表单元素

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：Vue 实现新国标红绿灯效果实例详解_vue.js_

下一篇：使用react+redux实现弹出框案例_React_

您现在的位置是：网站首页> 编程资料编程资料

React封装全屏弹框的方法_React_

相关内容

点击排行

本栏推荐

猜你喜欢