react封裝全域性彈框的方法
阿新 • • 發佈:2021-10-18
本文例項為大家分享了react封裝全域性彈框的具體程式碼,供大家參考,具體內容如下
彈框效果圖
檔案佈局
index.
/* 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 close = require('../images/guanbi.png') const line = require('../images/line.png') const defaultState = { alertStatus: false,alertTip: null,alertTitle: 'http://www.cppcns.com詳情',closeAlert: () => {} } class Toptips extends Component { state = { ...defaultState } // 動畫元件設定為目標元件 FirstChild = props => { const childrenArray = React.Children.toArray(props.children) return childrenArray[0] || null } // 關閉彈框 cddFEsXsonfirm = () => { const that = this console.log(that) this.setState( { alertStatus: false },() => { that.state.closeAlert() } ) } open = data => { const options = data || {} options.alertStatus = true this.setState({ ...defaultState,...options }) } close = () => { const that = this that.state.closeAlert() this.setState({ ...defaultState }) } shouldComponentUpdate = (nextPrhttp://www.cppcns.comops,nextState) => { return ( !is(fromJS(this.props),fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState)) ) } render() { const { alertStatus,alertTip,alertTitle } = this.state console.log(alertTip,alertTitle) return ( <div className="alert-con" style={alertStatus ? { display: 'block' } : { display: 'none' }} > <div className="alert-context"> <div className="alert-content-title">{alertTitle}</div> <img className="alert-content-line" src={line} alt="line" /> <div className="alert-content-detail">{alertTip}</div> <img role="presentation" onClick={() => { this.confirm() }} className="alert-close" src={close} alt="關閉" /> </div> </div> ) } } const div = document.createElement('div') const props = {} document.body.appendChild(div) const Box = ReactDOM.render(React.createElement(Toptips,props),div) export default Box
less
.alert-con { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,0.3); z-index: 222; } .alert-context { // background-color: #fff; // border-radius: 16px; position: relative; // height: 500px; height: 90%; width: 750px; margin: 40px auto 0; background: url(../images/alertBJ.png) no-repeat center; background-size: 100% 100%; .alert-close{ width: 30px; height: 30px; position: absolute; right: 30px; top: 30px; } .alert-content-title{ width: 100%; height: 80px; line-height: 80px; color: #fff; text-align: center; font-size: 36px; font-weight: bolder; // background: url(../images/line.png) no-repeat left bottom; } .alert-content-line{ width: 100%; height: 20px; margin-top: -44px; margin-left: -6px; } .alert-detais-list{ width: 102%; height: 100%; overflow-y: auto; padding: 20px 60px; .alert-detais-list-C{ p{ &:nth-child(1){ font-size: 14px; line-height: 20px; color: #FFFFFF; letter-spacing: 1.4px; } &:nth-child(2){ line-height: 24px; font-size: 18px; color: #FFFFFF; } } } } .alert-content-detail{ // height: 100%; height: calc(100% - 100px); /* overflow-y: auto; */ overflow: hidden; width: 98%; margin-top: -26px; } .alert-details-pdf{ width: 102%; height: 100%; overflow-y: auto; padding: 20px 60px; .alert-details-button{ display: flex; flex-direction: row; justify-content: flex-end; margin-bottom: 10px; p{ color:#fff; line-height: 35px; font-size: 16px; margin-right: 20px; } a{ line-height: 35px; font-size: 16px; margin-right: 20px; } } } .cameraWrap{ width: 100%; height: 102%; box-sizing: border-box; padding: 12px 4px 0 14px; } }
用法
- alertTitle 彈框標題
- alertTip 彈框內容,樣式自己自定義
- closeAlert 關閉時候返回資訊,可要可不要,根據自己需求。
import Toptips from "./Toptips" Toptips.open({ alertTitle: '批示詳情',alertTip: that.htms(val),closeAlert: function () { console.log("關閉了..."); } }); htms = val => { return (<div className="alert-detais-list"> <div className="alert-detais-list-C"> <p>批示內容:</p> <p>{val.fdTitle}</p> </div> <div className="alert-detais-list-C"> <p>批示詳述:</p> <p>{val.fdTitle}</p> </div> <div className="alert-detais-list-C"> <p>措施及結果:</p> <p>{val.fdContent}</p> </div> <div className="alert-detais-list-C"> <p>進度詳情:</p> <p></p> </div> </div>) }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多http://www.cppcns.com支援我們。