MessageBox 弹框组件文档 BeerUi-官方文档

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
}

Contributors

Resource

Github