Skip to main content

useConfirm

用于打开弹框和抽屉的 hooks。

引入​

import {useConfirm} from '@baidu/acud-pro-components';

基本用法​

function App() {
    const {Confirm, setConfirmOptions} = useConfirm();

    const showConfirm = () => {
        const confirmOptions = {
            title: '确认',
            content: '内容',
            onOk: () => {console.log(123)}
        };
        setConfirmOptions(confirmOptions);
    };

    return (
        <>
            <Button onClick={showConfirm}>显示确认框</Button>
            {Confirm}
        </>
    );
}

不同类型​

通过 type 属性控制弹框类型。

function App() {
    const {Confirm, setConfirmOptions} = useConfirm();

    const showConfirm = type => {
        const confirmOptions = {
            type,
            title: '确认',
            content: '内容',
            onOk: () => {
                console.log(123);
            }
        };
        setConfirmOptions(confirmOptions);
    };

    return (
        <>
            <div className="acux-demo-row">
                <Button onClick={() => showConfirm('warning')}>warning</Button>
                <Button onClick={() => showConfirm('info')}>info</Button>
                <Button onClick={() => showConfirm('error')}>error</Button>
            </div>
            {Confirm}
        </>
    );
}

隐藏遮罩​

通过 mask 属性控制弹框类型。

function App() {
    const {Confirm, setConfirmOptions} = useConfirm();

    const showConfirm = () => {
        const confirmOptions = {
            title: '确认',
            content: '内容',
            mask: false,
            onOk: () => {console.log(123)}
        };
        setConfirmOptions(confirmOptions);
    };

    return (
        <>
            <Button onClick={showConfirm}>显示确认框-隐藏遮罩</Button>
            {Confirm}
        </>
    );
}

API​

参数说明类型默认值
type弹框类型warning〡success〡info〡errorwarning
title弹框标题string--
content弹框内容ReactNode--
visible是否显示boolean--
footer弹框底部ReactNode--
okText确认文本string确定
cancelText取消文本string取消
mask是否显示遮罩booleantrue
onOk确认回调(e: React.MouseEvent<HTMLElement>) => void--
onCancel取消回调(e: React.MouseEvent<HTMLElement>) => void--