react封装Dialog弹框的方法

本文实例为大家分享了react封装Dialog弹框的具体代码，供大家参考，具体内容如下

Dialog.js

import React, { Component, Children } from "react";
import { createPortal } from "react-dom";
import "../static/css/Dialog.scss"
export default class Dialog extends Component {
  constructor(props) {
    super(props);
    const doc = window.document;
    this.node = doc.createElement("div");
    doc.body.appendChild(this.node);
  }
  componentWillUnmount() {
    window.document.body.removeChild(this.node);
  }
  render() {
    const { children, hideDialog, hide } = this.props;
    let tem = hide ? "hidden" : "";
    console.log("hide", tem);
    return createPortal(
      <div className="dialogBox" style={{ visibility: tem }}>
        <div className="dialog">
          {children}
          <button onClick={hideDialog}>close</button>
        </div>
      </div>,
      this.node
    );
  }
}

Dialog.scss

.dialogBox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog{
  width: 50%;
  height: 50%;
  text-align: center;;
  background-color: #fff;
  }
}

DialogPage.js 使用

/*
 * @Author: shihaixia
 * @Date: 2022-02-24 09:58:02
 * @Description: 
 */
import React, { Component } from "react";
import { Button } from "antd";
import Dialog from "../components/Dialog";

export default class DialogPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showDialog: false,
    };
  }
  handleShowDialog = () => {
    this.setState({
      showDialog: !this.state.showDialog,
    });
  };
  render() {
    const { showDialog } = this.state;
    return (
      <div className="dialogPage">
        <h1>DialogPage</h1>
        <Button onClick={this.handleShowDialog}>切换</Button>
        {showDialog && (
          <Dialog hideDialog={this.handleShowDialog} hide={false}>
            <h3>标题</h3>
            <p>这是一个弹窗</p>
          </Dialog>
        )}
      </div>
    );
  }
}

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

赞 (0)

相关推荐

  • react-native 封装选择弹出框示例(试用ios&android)

    react-native 封装选择弹出框示例(试用ios&android)

    在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

  • React Native实现进度条弹框的示例代码

    本文介绍了React Native实现进度条弹框,分享给大家 我们在上传或者下载文件时候,希望有一个进度条弹框去提醒用户取当前正在上传或者下载,也允许用去取点击取消上传或者下载. 首先实现进度条. import React, { PureComponent } from 'react'; import { StyleSheet, View, Animated, Easing, } from 'react-native'; class Bar extends PureComponent { con

  • React封装弹出框组件的方法

    React封装弹出框组件的方法

    本文实例为大家分享了React封装弹出框组件的方法,供大家参考,具体内容如下 效果图 文件目录 alertList.tsx 用于容纳弹出框的容器 import React from "react"; export const HAlertList = () => {     return (         <div             id="alert-list"             style={{                 posi

  • react使用antd表单赋值,用于修改弹框的操作

    1.使用getFieldDecorator的initialValue 2.在state里定义一个变量存表格的数据 3.给打开弹框的方法传个record 4.把表格里的值存到state 5.把在state里存的值传给弹框 6.获取传过来的值 7.在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值 7.OK 补充知识:react中使用antd的表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Funct

  • react封装全局弹框的方法

    react封装全局弹框的方法

    本文实例为大家分享了react封装全局弹框的具体代码,供大家参考,具体内容如下 弹框效果图 文件布局 index.js /* eslint-disable react/no-render-return-value */ import React, { Component } from 'react' import { is, fromJS } from 'immutable' import ReactDOM from 'react-dom' import './alert.less' const

  • react封装Dialog弹框的方法

    react封装Dialog弹框的方法

    本文实例为大家分享了react封装Dialog弹框的具体代码,供大家参考,具体内容如下 Dialog.js import React, { Component, Children } from "react"; import { createPortal } from "react-dom"; import "../static/css/Dialog.scss" export default class Dialog extends Compon

  • 自定义Dialog弹框和其背景阴影显示方法

    昨天研究了一下自定义Dialog的弹框,其实要点都是把自定义好的view用setContentView(view)的方法设置进dialog里,首先我们先看一个简单的自定义Dialog. 一.写布局文件:custom_dialog_layout.xml(这个布局就是一个简单的提示内容,下面有一个确定的按钮,请参看评论中的效果图) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an

  • 使用Vant完成Dialog弹框案例

    效果展示: 完整代码: <template> <!-- 完成Dialog 弹框 --> <div id="dialog"> <van-button class="btn" type="primary" @click="TipDialog">提示弹出框</van-button> <van-button class="btn" type=&quo

  • Android 提交或者上传数据时的dialog弹框动画效果

    Android 提交或者上传数据时的dialog弹框动画效果

    效果图如下所示: 类似这种弹框里含有动画,一般我们在上传数据或者支付的时候会用到,当然,假如我们换几张图片,还可以把它当做是加载数据的时候使用,总之这是一个dialog弹框,只不过这个弹框在弹出后,上面有动画的运行. 上代码 首先是布局文件 : <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="200dp" andr

  • android自定义Dialog弹框和背景阴影显示效果

    android自定义Dialog弹框和背景阴影显示效果

    本文实例为大家分享了android自定义Dialog弹框和背景阴影显示的具体代码,供大家参考,具体内容如下 首先需要自定义一个类,继承Dialog import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager;

  • vue实现可拖拽的dialog弹框

    vue实现可拖拽的dialog弹框

    本文主要介绍了vue实现可拖拽的dialog弹框,分享给大家,具体如下: element的dialog弹框在项目中挺常用的.但有时候嵌套的话会遮住,体验不好.拖拽形式的弹框会提高用户体验 借助基于 Sortable.js 的 Vue 拖拽组件vuedraggable 安装 npm install vuedraggable --save 在公共组件中新建个js文件,搭配vue自定义指令来实现拖拽的效果 import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽属性 V

  • React封装全屏弹框的方法

    React封装全屏弹框的方法

    本文实例为大家分享了React封装全屏弹框的具体代码,供大家参考,具体内容如下 web开发过程中,需要用到弹框的地方很多,有时候,产品经理的原型是全屏弹框,而常用的组件库里封装的一般都不是全屏的. 如下图所示:这就是一个全屏弹框. 废话不多说,直接上代码: //  FullScreen.tsx import React, { memo, useEffect } from 'react'; import { Spin } from '@/components/antd'; import IconU

  • 通过vue.extend实现消息提示弹框的方法记录

    通过vue.extend实现消息提示弹框的方法记录

    前提回顾 在项目开发中我们经常使用的组件注册分为两种,一个是全局注册和另一个是局部注册,假设我们的业务场景是用户在浏览注册页面时,点击页面中的注册按钮后,前端根据用户的注册信息先做一次简单的验证,并根据验证弹出一个对应消息提示弹框 我们拿到这个需求后,便开始着手准备要通过局部注册消息弹框组件的方法来实现这个场景,在通过局部注册消息弹框组件的方法解决完这个需求后,自然是沾沾自喜,紧接着又迎来了一个需求,该需求是用户在点击该注册按钮时,点击几次就要出现几次这个消息弹框,你开始犯了难,并思考难道我要在

  • 小程序自定义弹框的方法

    小程序自定义弹框的方法

    本文实例为大家分享了小程序自定义弹框的具体代码,供大家参考,具体内容如下 1.页面简单布局 <button bindtap='ElasticFrameClick'>弹框</button> <view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view> <view wx:if="{{showModal

随机推荐