react 弹框组件

在这里插入图片描述

react没有slot插槽，但是可以直接通过{{props.children}}获取父组件标签中的内容

import React, { Component, useEffect } from 'react';
import { createPortal } from 'react-dom';
import CSSTransition from 'react-transition-group/CSSTransition';
import { Scrollbars } from 'react-custom-scrollbars';
import closePng from '../../static/icon/close.svg';
import './index.css';function Dialog(props) {const { left, top, width, height } = props;if (!document.querySelector('#dialog')) {const htmlDOM = document.createElement('div');htmlDOM.setAttribute('id', 'dialog');document.body.appendChild(htmlDOM);}useEffect(() => {if (!document.querySelector('#mask')) {const maskDOM = document.createElement('div');maskDOM.setAttribute('id', 'mask');document.body.appendChild(maskDOM);}return componentWillUnmount;}, []);// 移除弹框function componentWillUnmount() {// 有mask和dialog节点时候再移除if (document.querySelector('#mask') && document.querySelector('#dialog')) {const dialog = document.getElementById('dialog');document.body.removeChild(dialog);const mask = document.getElementById('mask');document.body.removeChild(mask);}}// 关闭弹框function onClose() {props.closeDialog(false);}// 内容const html = (<divclassName='dialog_box'style={{position: 'fixed',left,top,width,height,transform: `translate(-50%,-50%)`,}}><div className='dialog_header'><div>{props.title}</div><img className='close_icon' width='16' onClick={onClose} src={closePng} alt='x'></img></div><div className='dialog_body'><Scrollbars style={{ height: `100%`, width: `100%` }}><div>{props.children}</div></Scrollbars></div></div>);// createPortal(html, DOM)可以吧html注册到指定DOM里return <>{createPortal(html, document.getElementById('dialog'))}</>;
}
Dialog.defaultProps = {// title: '弹框',left: '50%',top: '40%',width: 600,height: 400,
};
export default Dialog;

//过度动画包裹着 可以删除
<CSSTransition in={state.isDialog} timeout={500}  classNames='dialog_animation'><>{state.isDialog && (<Dialog title={'提示'} isDialog={state.isDialog} closeDialog={closeDialogHandle}><div>111</div><button onClick={addHandler}>累加{num}</button></Dialog>)}</>
</CSSTransition>

react 弹框组件相关推荐

看完这篇不要告诉我不会封装ant design弹框组件了
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣获取前端学习知识 1设计需求封装一个弹框组件直接调用接口 2技术栈 ant design+react 设计第一步绘制样式 < ...
移动端（H5）弹框组件--简单--实用--不依赖jQuery
俗话说的好,框架是服务与大家的,包含的功能比较多,代码多.在现在追求速度的年代.应该根据自己的需求去封装自己所需要的组件. 下边就给大家介绍一下自己封装的一个小弹框组件,不依赖与jQuery,代码少, ...
vantUI弹框组件 message文字，如何换行？
vantUI弹框组件 message文字,如何换行 ? 代码如下: // 权限已到期 if(response.data.code == 6001){Toast.fail({duration: 1500 ...
ElementUI弹框组件 messageBox 如何换行？
ElementUI弹框组件 messageBox 如何换行 ? 参考博客:element this.$confirm确定框内容换行显示效果图 · 截图示下: demo代码如下: const conf ...
elemenUI - 弹框组件alert - 宽度设置？ - 疑问篇
举例如下:(elemenUI - 使用alert弹框组件),对比代码和效果图官方组件+文档演示地址:点击查看官方文档部分主要代码 · 如下: <el-col class="user ...
VUE2.0增删改查附编辑添加model(弹框)组件共用
为什么80%的码农都做不了架构师?>>> Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言最近一直在学习Vue,发现一份crud不错的源码预览链接 https: ...
Element-UI源码学习——弹框组件
手写弹框组件文章目录手写弹框组件前言一.Element-UI的弹框二.如何自己手写? 前言首先,分析一下Element-UI的对话框,点击,会弹出一个对话框.对话框由具体的弹框内容.关闭或 ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
Vue 自定义一个全局弹框组件
前文:其实element ui有提供this.$mesage和this.$notify弹框组件可供使用,但是我们的ui设计的样式以及布局还是不完全一样的,为了达到100%的呈现效果,所以自己写了一个全 ...

react 弹框组件

react 弹框组件相关推荐

最新文章

热门文章