在线体验

安装

npm install react-popup-components

注意：必须先安装 React ，npm install react

Alert

代码演示

import { alert } from 'react-popup-components'
function Test() {
    const [ alertApi, alertContext ] = alert.useMessage();
    const handle = () => {
        alertApi.info({
            title: 'title',
            content: 'content',
            fn() {
                alertApi.close();
            }
        });
    }
    return (
        <>
        	<h1>Alert</h1>
        	<button onClick={handle}>click</button>
        	{alertContext}
        </>
    );
}
export default Test

API

传递信息方法

• alertApi.info(config)

config对象属性如下：

| 参数 | 说明 | 类型 | 默认值 | | ------- | -------------------- | -------- | ------ | | title | 提示标题 | string | - | | content | 提示内容 | string | - | | fn | 点击确认后的回调函数 | function | - |

关闭窗口方法

• alertApi.close()（默认点击确认后会关闭）

Confirm

代码演示

import { confirm } from 'react-popup-components'
function Test() {
    const [ confirmApi, confirmContext ] = confirm.useMessage();
    const handle = () => {
        confirmApi.info({
            title: 'title',
            content: 'content',
            fn() {
                confirmApi.close();
            }
        });
    }
    return (
        <>
        	<h1>Confirm</h1>
        	<button onClick={handle}>click</button>
        	{confirmContext}
        </>
    );
}
export default Test

API

传递信息方法

• confirmApi.info(config)

config对象属性如下：

| 参数 | 说明 | 类型 | 默认值 | | ------- | -------------------- | -------- | ------ | | title | 提示标题 | string | - | | content | 提示内容 | string | - | | fn | 点击确认后的回调函数 | function | - |

关闭窗口方法

• confirmApi.close()（默认点击确认后会关闭）

Toast

代码演示

import { toast } from 'react-popup-components'
function Test() {
    const [ toastApi, toastContext ] = toast.useMessage();
    const handle = () => {
        toastApi.info('content');
    }
    return (
        <>
        	<h1>Confirm</h1>
        	<button onClick={handle}>click</button>
        	{toastContext}
        </>
    );
}
export default Test

API

传递信息方法

• toastApi.info(content)

| 参数 | 说明 | 类型 | 默认值 | | ------- | -------- | ------ | ------ | | content | 提示内容 | string | - |