React封装全屏弹框的方法

 更新时间:2022年08月25日 14:44:52   作者:小刘加油!  
这篇文章主要为大家详细介绍了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 && (
        <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 一般是表单元素

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

相关文章

  • React-Native使用Mobx实现购物车功能

    React-Native使用Mobx实现购物车功能

    本篇文章主要介绍了React-Native使用Mobx实现购物车功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React使用xlsx和js-export-excel实现前端导出

    React使用xlsx和js-export-excel实现前端导出

    这篇文章主要为大家详细介绍了React如何分别使用xlsx和js-export-excel实现前端导出功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2024-02-02
  • React组件学习之Hooks使用

    React组件学习之Hooks使用

    这篇文章主要介绍了React hooks组件通信,在开发中组件通信是React中的一个重要的知识点,本文通过实例代码给大家讲解react hooks中常用的父子、跨组件通信的方法,需要的朋友可以参考下
    2022-08-08
  • React Router v4 入坑指南(小结)

    React Router v4 入坑指南(小结)

    这篇文章主要介绍了React Router v4 入坑指南(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 浅谈react.js 之 批量添加与删除功能

    浅谈react.js 之 批量添加与删除功能

    下面小编就为大家带来一篇浅谈react.js 之 批量添加与删除功能。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 引入代码检查工具stylelint实战问题经验总结分享

    引入代码检查工具stylelint实战问题经验总结分享

    eslint的配置引入比较简单,网上有比较多的教程,而stylelint的教程大多语焉不详。在这里,我会介绍一下我在引入stylelint所遇到的坑,以及解决方法
    2021-11-11
  • React Native使用fetch实现图片上传的示例代码

    React Native使用fetch实现图片上传的示例代码

    本篇文章主要介绍了React Native使用fetch实现图片上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解如何在Remix 中使用 tailwindcss

    详解如何在Remix 中使用 tailwindcss

    这篇文章主要为大家介绍了如何在Remix中使用tailwindcss方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • React 保留和重置State

    React 保留和重置State

    这篇文章主要为大家介绍了React 保留和重置State实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 渐进式源码解析React更新流程驱动

    渐进式源码解析React更新流程驱动

    这篇文章主要为大家介绍了渐进式源码解析React更新流程驱动详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04

最新评论