mui-dialog组件 (opens new window)

mui共提供了四种Dialog消息框：

组件名	作用
alert	警告框
confirm	确认框
prompt	输入对话框
toast	消息提示框

弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。

mui会根据ua判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框

两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式

接下来我会详细介绍一下每一种的用法并给出相关代码

alert(警告框)

mui.alert( message, title, btnValue, callback [, type] )

字段	Type/value	备注
message	Type: String	提示对话框上显示的内容
title	Type:String	提示对话框上显示的标题
btnValue	Type:String	提示对话框上按钮显示的内容
callback	Type:Function	提示对话框上关闭后的回调函数
type	Value:'div'	是否使用h5绘制的对话框

mui.alert('欢迎使用 MUI !', function() {
    console.log('警告框');
});

confirm(确认框)

mui.confirm( message, title, btnValue, callback [, type] )

字段	Type/value	备注
message	Type: String	提示对话框上显示的内容
title	Type:String	提示对话框上显示的标题
btnValue	Type:Array	提示对话框上按钮显示的内容
callback	Type:Function	提示对话框上关闭后的回调函数
type	Value:'div'	是否使用h5绘制的对话框

mui.confirm('MUI是个好框架', 'Hello MUI', ['是', '否'], function(e) {
    //这里的e.index是对话框按钮的下标，左边按钮为0右边为1
    if(e.index == 0){
        console.log('感谢您的支持!')
    }
})

prompt(对话框)

mui.prompt( message, placeholder, title, btnValue, callback[, type] )

字段	Type/value	备注
message	Type: String	提示对话框上显示的内容
placeholder	Type:String	编辑框显示的提示文字
title	Type:String	提示对话框上显示的标题
btnValue	Type:Array	提示对话框上按钮显示的内容
callback	Type:Function	提示对话框上关闭后的回调函数
type	Value:'div'	是否使用h5绘制的对话框

mui.prompt('请输入您对MUI的评语', '性能好', 'Hello MUI', ['取消', '确认'], function(e) {
    //这里e.index是按钮的下标，e.value是编辑框的内容
    if(e.index==1){
        console.log('谢谢您的评价:'+ e.value)
    }
})

toast(提示框)

mui.toast( message [,options])

字段	Type/value	备注
message	Type: String	消息框显示的文字内容
options	Type: JSON	提示消息的参数

提示

options支持两个参数：

参数	说明	说明
duration	持续显示时间,默认值 short(2000ms)	支持 整数值 和 String , String可选: long(3500ms),short(2000ms)
type	强制使用mui消息框(div模式)	'div'

 mui.toast('登陆成功',{ duration:'long', type:'div' }) 

mui另外也提供了两个关闭消息框的方法：

closePopup()

只能关闭h5模式的对话框

关闭最后一次弹出的对话框

mui.closePopup()

closePopups()

只能关闭h5模式的对话框

关闭所有对话框

mui.closePopups()