React封裝全屏彈框的方法
本文實例為大家分享了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)購物車功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09React使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出
這篇文章主要為大家詳細(xì)介紹了React如何分別使用xlsx和js-export-excel實現(xiàn)前端導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-02-02引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享
eslint的配置引入比較簡單,網(wǎng)上有比較多的教程,而stylelint的教程大多語焉不詳。在這里,我會介紹一下我在引入stylelint所遇到的坑,以及解決方法2021-11-11React Native使用fetch實現(xiàn)圖片上傳的示例代碼
本篇文章主要介紹了React Native使用fetch實現(xiàn)圖片上傳的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03