---
name: Confirm
menu: Components
---
# Confirm
import confirm from './index'
import Button from '../button/index'
import Dialog from '../dialog/style/index.scss';
import { Playground, Props } from 'docz'
import './style/index.scss'

```
confirm是一个函数
 @param jsx 消息内容 (required)
 @param type 消息类型 (optional, default='info'): 'info' | 'success' | 'alert' | 'question'
 @returns {Promise} 在用户点击 确定 时 resolve，取消 时 reject
 ```

## Basic Usage
<Playground>
    <Button onClick={() => {
        confirm((
            <ul>
            考虑到不同类型课程的报名人数和课程时长（第一节直播任务与最后一节直播任务的时间间隔）对得分的影响，我们将所有课程分为以下七类，每类课程有不同的奖励标准：
            <li>小班短课：报名人数为50人及以下，该期课程持续25天及以下</li>
            <li>小班中长课：报名人数为50及以下，该期课程持续26天~ 70天</li>
            <li>小班长课：报名人数为50人及以下，该期课程持续71天及以上</li>
            <li>中班中长课：报名人数为51人~ 120人，该期课程持续26天~ 70天</li>
            <li>中班长课：报名人数50-120，且该期课程持续71天及以上</li>
            <li>大班短课：报名人数为50人以上，且该期课程持续25天及以下</li>
            <li>大班长课：报名人数120以上，且该期课程持续25天以上</li>
            </ul>
        )).then(() => {
            alert('你确认了操作');
        }).catch(() => {
            alert('你取消了操作');
        });
    }}>执行操作</Button>
</Playground>

## Types
<Playground>
    <Button onClick={() => {
        confirm((
            <p>
            您报名的课程是：【基础课】前端必学知识点
            </p>
        ), 'info').then(() => {
            alert('你确认了操作');
        }).catch(() => {
            alert('你取消了操作');
        });
    }}>info</Button>

    <Button onClick={() => {
        confirm((
            <p>
            <strong>图片要求</strong>
            <a href="//ke.qq.com/docs/cover-description.jpg">点击查看课程封面模版规范</a>
            尺寸大于1080*608
            分辨率小于96dpi
            大小小于2M
            支持JPG/PNG/BMP等格式图片
            <span className="im-msg-sub">请按照图片要求上传</span>
            </p>
        ), 'alert').then(() => {
            alert('你确认了操作');
        }).catch(() => {
            alert('你取消了操作');
        });
    }}>alert</Button>

    <Button onClick={() => {
        confirm((
            <p>
            操作成功!
            </p>
        ), 'success').then(() => {
            alert('你确认了操作');
        }).catch(() => {
            alert('你取消了操作');
        });
    }}>success</Button>
    <Button onClick={() => {
        confirm((
            <p>
            你确认要执行此操作吗？
            </p>
        ), 'question').then(() => {
            alert('你确认了操作');
        }).catch(() => {
            alert('你取消了操作');
        });
    }}>question</Button>

</Playground>