摘要：組件實現(xiàn)基本簡介類似于實現(xiàn)的組件，首先基本結(jié)構(gòu)分析遮罩層內(nèi)容包裝層主體內(nèi)容層，包含固定定位布局，全屏遮蓋顯示，所以內(nèi)容自定義實現(xiàn)功能目標兩種調(diào)用方式一些內(nèi)容遮罩層和的顯示與否，單擊是否可關(guān)閉其他必備功能結(jié)構(gòu)布局攻克基本布局遮

類似于antd實現(xiàn)的modal組件，首先基本結(jié)構(gòu)分析：

modal-mask遮罩層

modal-warp內(nèi)容包裝層

modal主體內(nèi)容層，包含：title、content、footer、close-btn

固定定位布局，全屏遮蓋顯示，所以內(nèi)容自定義

實現(xiàn)功能目標：

兩種調(diào)用方式一些內(nèi)容、Modal.confirm({...props})

遮罩層、footer和close-btn的顯示與否，單擊是否可關(guān)閉

其他必備功能

基本布局

    
 // 遮罩層需要實現(xiàn)全屏遮罩
    // 內(nèi)容層高度可自定義
    

        // 右上角關(guān)閉按鈕
       
+
}
       // 主內(nèi)容
       

            

                //title標題
                

                    
{title}
                
                //body用戶輸入內(nèi)容
                

                    {children}
                
                // footer底部按鈕
                

                    

                        {okText}
                        {cancelText}
                    
                
            
        
   

遮罩層全屏覆蓋

position: fixed定位

全屏實現(xiàn)

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;

內(nèi)容層

position: fixed定位（modal-warp層）

warp層的布局大小考慮

全屏：如果warp層實現(xiàn)全屏，由于和mask層為兄弟組件，導(dǎo)致warp層位于mask層之上，后面對mask層單擊可關(guān)閉功能易出現(xiàn)單擊不到，因為被全屏的warp層遮擋（可考慮使用事件委托，將單擊事件綁定至第一個父組件，通過判斷去除modal層的單擊，雖然單擊的還是warp層）；

大小跟隨modal層：及設(shè)置warp層的大小剛好為其內(nèi)容modal，這樣就不會覆蓋全部mask層，但是，后期對傳入設(shè)置是否顯示mask層的功能有所影響（因為warp層不全屏，如果mask設(shè)置不顯示，會導(dǎo)致用戶可以操作到底下主內(nèi)容），可考慮mask的顯隱通過visibility: hidden控制.

基本對外接口(函數(shù)式)

const Modal = ({
    visible=false,
    style,
    width= 520,
    zIndex=1000,
    centered=false,
    title="title",
    footer,
    wrapClassName="",
    okText="確定",
    okType="primary",
    cancelText="取消",
    cancelType="default",
    closable= true,
    onOk=() => {},
    onCancel=() => {},
    mask=true,
    maskClosable= true,
    children="Basic body"
}) => {
    return (
        visible ?
        ReactDOM.createPortal(
....
,document.querySelector("body")) : null
    )
}

組件采用函數(shù)無狀態(tài)編程，Modal的顯隱由外部控制，內(nèi)部不控制；

組件的掛載使用ReactDOM.createPortal(child,container)掛載至body

基本使用形式

import React,{ PureComponent } from "react";
import { Modal,Button } from "lwh_react";

export default class baseModal extends PureComponent {
    state = {
        visible: false
    }

    showModal = () => {
        this.setState({
            visible: true
        })
    }
    onCancel = () => {
        console.log("cancel")
        this.setState({
            visible: false
        })
    }
    onOk = () => {
        console.log("ok")
        this.setState({
            visible: false
        })
    }

    render() {
        const { visible } = this.state;
        return (
            

                簡單基本用法：
                modal
                
                    
modal提示內(nèi)容
                
            
        )
    }
}

效果

如何實現(xiàn)類似antd中modal.method的方法調(diào)用彈窗形式（且調(diào)用后返回一個引用包含{update, destroy}可控制彈窗）：

Modal.info({...})

Modal.success({...})

Modal.error({...})

Modal.warning({...})

Modal.confirm({...})

method()是Modal的方法即先給組件Modal增加對應(yīng)方法，返回一個對象；

通過在method(props)方法中將其方法參數(shù)作為組件Modal的props傳入，并render（Modal）；

需要返回一個對象包含{update, destroy}基本代碼如下：

["confirm","info","success","error","warning"].forEach(item => {
    // eslint-disable-next-line react/no-multi-comp
    Modal[item] = ({ ...props}) => {
        let div = document.createElement("div");
        let currentConfig = Object.assign({}, props);
        document.body.appendChild(div);
        // 使用高階組件剔除Method（）調(diào)用形式不可配置的props和默認值
        const FunModal = HOCModal(Modal);
        // 關(guān)閉
        const destroy = () => {
            const unmountResult = ReactDOM.unmountComponentAtNode(div);
            if (unmountResult && div.parentNode) {
                div.parentNode.removeChild(div);
            }
        }
        const render = (config) => {
            //name傳入調(diào)用的方法名，用于區(qū)分使用不同footer和Icon
            ReactDOM.render(, div);
        }
        // 更新
        const update = (newConfig) => {
            currentConfig = Object.assign({}, currentConfig,newConfig);
            render(currentConfig);
        }
        render(currentConfig);
        return {
            destroy: destroy,
            update: update
        }
    }
});

因為Modal.method()調(diào)用形式可使用的配置props與中的配置項和默認值有所不同；

如Modal.confirm({})中不可配置footer;Modal.info({})的footer底部默認應(yīng)該為一個button,且默認值為我知道了；

再如Modal.method()不需要傳遞visible，而形式需要傳入；

再比如Modal.method()中沒有children，而使用content作為內(nèi)容的傳遞，所以需要適配下；

所以這里考慮使用一個高階組件HocModal對傳給Modal的props進行部分剔除和默認值修改

const HOCModal = (Component) => {
    //剔除出visible，footer，closable，使其不可配，賦予永久默認值
    return ({
        visible,
        footer,
        closable,
        okText="知道了",
        okType="primary",
        onOk=() => {},
        onCancel=() => {},
        maskClosable= false,
        content="Basic body",
        name,
        destroy,
        ...props
    }) => {
        // 修改onOk方法傳入關(guān)閉Modal方法destroy();
        const onOk_1 = () => {
            onOk();
            destroy();
        }
        // 修改onCancel方法傳入關(guān)閉Modal方法destroy();
        const onCancel_1 = () => {
            onCancel();
            destroy();
        }
        // Modal底部footer固定使用這里為默認值，且不可自定義footer，如果調(diào)用的是confirm返回undefined走Modal的默認配置，其他則只顯示一個OK、button
        // eslint-disable-next-line react/no-multi-comp
        const Footer = () => (
            name == "confirm" ? undefined : {okText}
        )
        return (
        
    )
    }
}

使用測試

const ModalConfirm = () => {
    const onInfo = () => {
        Modal.info({
        title: "Info",
        content: (
          

            
some messages...some messages...
            
some messages...some messages...
          
        ),
        onOk() {}
      });
    }
    const showDeleteConfirm = () => {
        const modal = Modal.confirm({
          title: "你確定需要刪除該項么?",
          content: "一些刪除提示內(nèi)容",
          okText: "刪除",
          okType: "danger",
          cancelText: "取消",
          onOk() {
            console.log("OK");
          },
          onCancel() {
            console.log("Cancel");
          }
        });
        console.log(modal);
    }
    return (
        

            刪除
            info
        
    )
}

結(jié)果展示

顯隱的動畫過渡；

組件的保留，這里只實現(xiàn)了關(guān)閉即摧毀；優(yōu)化為可選擇不摧毀只是隱藏；

支持異步加載關(guān)閉

“積跬步、行千里”—— 持續(xù)更新中~，喜歡的話留下個贊和關(guān)注哦！

往期經(jīng)典好文：

你不知道的CORS跨域資源共享

性能優(yōu)化篇---Webpack構(gòu)建速度優(yōu)化

團隊合作必備的Git操作

使用pm2部署node生產(chǎn)環(huán)境

下期考慮Carousel走馬燈封裝