欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • React-Native使用Mobx實現(xiàn)購物車功能

    React-Native使用Mobx實現(xiàn)購物車功能

    本篇文章主要介紹了React-Native使用Mobx實現(xiàn)購物車功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • React使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出

    React使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出

    這篇文章主要為大家詳細(xì)介紹了React如何分別使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
    2024-02-02
  • React組件學(xué)習(xí)之Hooks使用

    React組件學(xué)習(xí)之Hooks使用

    這篇文章主要介紹了React hooks組件通信,在開發(fā)中組件通信是React中的一個重要的知識點,本文通過實例代碼給大家講解react hooks中常用的父子、跨組件通信的方法,需要的朋友可以參考下
    2022-08-08
  • React Router v4 入坑指南(小結(jié))

    React Router v4 入坑指南(小結(jié))

    這篇文章主要介紹了React Router v4 入坑指南(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • 淺談react.js 之 批量添加與刪除功能

    淺談react.js 之 批量添加與刪除功能

    下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • 引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享

    引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享

    eslint的配置引入比較簡單,網(wǎng)上有比較多的教程,而stylelint的教程大多語焉不詳。在這里,我會介紹一下我在引入stylelint所遇到的坑,以及解決方法
    2021-11-11
  • React Native使用fetch實現(xiàn)圖片上傳的示例代碼

    React Native使用fetch實現(xiàn)圖片上傳的示例代碼

    本篇文章主要介紹了React Native使用fetch實現(xiàn)圖片上傳的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • 詳解如何在Remix 中使用 tailwindcss

    詳解如何在Remix 中使用 tailwindcss

    這篇文章主要為大家介紹了如何在Remix中使用tailwindcss方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • React?保留和重置State

    React?保留和重置State

    這篇文章主要為大家介紹了React?保留和重置State實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • 漸進(jìn)式源碼解析React更新流程驅(qū)動

    漸進(jìn)式源碼解析React更新流程驅(qū)動

    這篇文章主要為大家介紹了漸進(jìn)式源碼解析React更新流程驅(qū)動詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04

最新評論