Skip to main content

createDialog

创建弹框的高阶组件。

引入​

import {components} from 'baidu-acu-react-common';

const {createDialog} = components;

基本用法​

import {Button} from 'antd';
import {useState} from 'react';

const WrappedComponent = () => (
    <div>弹框中的组件</div>
);

let Dialog = null;

const DialogDemo = () => {
    const [dialogOptions, setDialogOptions] = useState();
    const [dialogOpen, setDialogOpen] = useState(false);

    const showDialog = () => {
        const options = {
            dialogType: 'common',
            className: 'my-dialog',
            title: '我的弹框',
            width: 600,
            maskClosable: false, // 点击旁边弹框是否可关闭，默认为true
            foot: true, // 是否需要弹框底部，默认为true
            payload: {
                aa: 1
            } // 传到wappedComponent中的参数
        };
        setDialogOptions(options);
        setDialogOpen(true);
    };

    const handleDialogCancel = () => {
        Dialog = null;
        setDialogOptions(null);
    };
    const handleDialogSuccess = () => {
        console.log('handleDialogSuccess');
    };

    if (!Dialog && dialogOptions) {
        Dialog = CreateDialog(dialogOptions)(WrappedComponent);
    }

    return (
        <div>
            <Button type="primary" icon="plus" onClick={showDialog}>显示弹框</Button>
            {Dialog && (
                <Dialog
                    open={dialogOpen}
                    onCancel={handleDialogCancel}
                    onSuccess={handleDialogSuccess}
                />
            )}
        </div>
    );
};

<DialogDemo />

API​

options​

参数说明类型默认值
dialogType弹框类型, plain为纯展示类型，common一般有交互stringcommon
className样式名string
title弹框头部titlestring
width弹框宽度number
maskClosable是否点击外面可以关闭弹框booleantrue
foot是否需要弹框底部boolean
payload传入的数据object
message显示的信息string

弹框 Props​

参数说明类型默认值
open是否打开弹框booleanfalse
onSuccess成功时激活的方法function
onCancel关闭弹框后激活的方法function

参考文档​

https://react-app-common.now.baidu-int.com/#/%E9%80%9A%E7%94%A8%E7%BB%84%E4%BB%B6/CreateDialog