- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## MessageBox 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

### 基本用法

    import { messageBox } from '@brewer/beerui'
    const openMessage = () => {
    		messageBox({
    			title: 'i am title',
    			message: 'i am message content!',
    			buttons: [
    				{ text: '取消', customClass: 'be-button be-button--default', cb: ctx => ctx.close(), prevIcon: 'loading' },
    				{ text: '确定', type: 'submit', customClass: 'be-button be-button--normal be-button--primary', cb: () => console.log('确定') },
    			],
    			beforeClose() {
    				return true
    			},
    			complete() {
    				console.log('complete');
    			}
    		})
    	}
    }
    const openTypeMessage = (type) => {
    	messageBox({
    		type ,
    		title: 'i am title',
    		message: 'i am message content!'
    	})
    }

    <BeButton size="normal" type="warning" on:click={() => openTypeMessage('warning')}>打开 warning MessageBox</BeButton>

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
type | 消息类型，用于显示图标 | string | success / info / warning / error | ''
title | 标题 | string | - | 提示
message | 消息正文内容 | string | - | ''
buttons | 底部按钮组 | [RenderBtn] | - | []
customClass | 自定义类名 | string | - | ''
showClose | 展示右上角的关闭按钮 | boolean | true/false | true
closeOnClickModal | 是否可通过点击遮罩关闭 | boolean | true/false | true
lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | true/false | true

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
complete | 渲染完成的回调函数 | ''
beforeClose | MessageBox 关闭前的回调，会暂停实例的关闭 | (event) => return true
closed | 关闭后的回调 | (event)

    type RenderBtn = {
        cb?: Function // click handle callback
        customClass?: string
        style?: string
        type?: string // button/submit
        text?: string // button text
        prevIcon?: string // button prev icon name
        nextIcon?: string // button next icon name
    }