返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React封装全屏弹框的方法
  • 338
分享到

React封装全屏弹框的方法

2024-04-02 19:04:59 338人浏览 八月长安
摘要

本文实例为大家分享了React封装全屏弹框的具体代码,供大家参考,具体内容如下 web开发过程中,需要用到弹框的地方很多,有时候,产品经理的原型是全屏弹框,而常用的组件库里封装的一般

本文实例为大家分享了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';




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);

这个是相关的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 (
        <Fragment>
            <FullScreen loadding={isLoading} title={'新增'} content={content} visible={visible} handleCancel={handleCancel} />
        </Fragment>
    )
}

content 一般是表单元素

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

--结束END--

本文标题: React封装全屏弹框的方法

本文链接: https://lsjlt.com/news/166014.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • React封装全屏弹框的方法
    本文实例为大家分享了React封装全屏弹框的具体代码,供大家参考,具体内容如下 web开发过程中,需要用到弹框的地方很多,有时候,产品经理的原型是全屏弹框,而常用的组件库里封装的一般...
    99+
    2024-04-02
  • react封装全局弹框的方法
    本文实例为大家分享了react封装全局弹框的具体代码,供大家参考,具体内容如下 弹框效果图 文件布局 index.js import React, { Component ...
    99+
    2024-04-02
  • react封装Dialog弹框的方法
    本文实例为大家分享了react封装Dialog弹框的具体代码,供大家参考,具体内容如下 Dialog.js import React, { Component, Children ...
    99+
    2024-04-02
  • React封装弹出框组件的方法
    本文实例为大家分享了React封装弹出框组件的方法,供大家参考,具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React f...
    99+
    2024-04-02
  • react-native弹窗封装的方法
    本文实例为大家分享了react-native弹窗封装的具体代码,供大家参考,具体内容如下 上图 仿苹果弹窗组件(android+ios均可用) 以上效果均基于本文的弹窗组件,后...
    99+
    2024-04-02
  • JavaScript封装弹框插件的方法
    JavaScript封装弹框插件的具体代码,供大家参考,具体内容如下 知识点1、document.querySelector() 方法 querySelector() 方法返回文档中...
    99+
    2024-04-02
  • vue3手动封装弹出框组件message的方法
    本文实例为大家分享了vue3手动封装弹出框组件message的具体代码,供大家参考,具体内容如下 封装组件 <template> <Transition n...
    99+
    2024-04-02
  • vue iview封装模态框的方法
    本文实例为大家分享了vue iview封装模态框的具体代码,供大家参考,具体内容如下 子组件 <template>   <Modal     :value="is...
    99+
    2024-04-02
  • Vue dialog模态框的封装方法
    前言 这个是基于vue2的模态框封装,仿照elementUI而写的组件。 效果如图 首先我们需要一个遮罩层 <template>     <div class="...
    99+
    2024-04-02
  • vue.js基于ElementUI封装了CRUD的弹框组件
    目录前言开始封装json对象如下所示table表头作为列表传入,数据结构如下在子组件中循环渲染出表头在父组件中调用前言 代码写得不好,为什么不封装一下呢,如果用的是ElementUI...
    99+
    2024-04-02
  • React实现组件全屏化的操作方法
    介绍 本文基于React+antd,给大家演示一个完整的全屏demo。 起因是开发今天给我提了一个sql编辑器输入框比较小,不支持放大,不太方便。希望能够全屏显示,联想到自己以后可能...
    99+
    2024-04-02
  • React日期时间显示组件的封装方法
    本文实例为大家分享了React日期时间显示组件的封装具体代码,供大家参考,具体内容如下 时间日期展示器 import ProtoType from 'prop-types'; im...
    99+
    2024-04-02
  • react结合typescript封装组件的方法是什么
    今天小编给大家分享一下react结合typescript封装组件的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。项...
    99+
    2023-07-06
  • vue.js基于ElementUI如何封装CRUD的弹框组件
    本文小编为大家详细介绍“vue.js基于ElementUI如何封装CRUD的弹框组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue.js基于ElementUI如何封装CRUD的弹框组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢...
    99+
    2023-07-02
  • 基于React封装一个组件的方法是什么
    这篇文章主要讲解了“基于React封装一个组件的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于React封装一个组件的方法是什么”吧!antd 是如何封装组件的仓库地址divi...
    99+
    2023-06-29
  • React hook实现简单的websocket封装方式
    目录React hook实现websocket封装react自定义hook解决websocket连接,useWebSocket1、描述2、代码React hook实现websocke...
    99+
    2024-04-02
  • react组件封装input框的防抖处理的项目实现
    目录防抖1.类组件版本2.函数组件版本防抖 防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间 项目中有些input框需要做防抖...
    99+
    2023-05-18
    react input框防抖 react 输入框防抖
  • php封装app的方法
    本文操作环境:windows7系统、PHP7.4版、DELL G3电脑使用php封装APP接口php封装APP接口我们先来介绍Json的封装方法 json_encode函数传递中文的话,输出后是乱码的,针对这个问题我觉得有必要做一个解释: ...
    99+
    2016-12-05
    php app
  • promise封装wx.request的方法
    上篇文章给大家介绍了使用Promise封装小程序wx.request的实现方法,本文重点给大家介绍promise封装wx.request的方法,具体内容如下所示: 为什么要封装wx....
    99+
    2024-04-02
  • uniapp自定义弹框的方法
    本文实例为大家分享了uniapp自定义弹框,适用所有类型,供大家参考,具体内容如下 效果原理 利用透明页面,点击进入当前页面,内容根据自己需求去实现,随便自定义,出来的效果就是一个...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作