UI组件 - dialog（对话框） - 《MUI 使用手册》

dialog（对话框）

dialog（对话框）

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

Dialog 组件包含:

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

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

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

mui v3.0 版本(含)以上的dialog控件支持换行（\n）显示

[

.alert( message, title, btnValue, callback [, type] )
](#on-events-selector-data-handler)
- message
  
  Type: String
  
  提示对话框上显示的内容
- title
  
  Type: String
  
  提示对话框上显示的标题
- btnValue
  
  Type: String
  
  提示对话框上按钮显示的内容
- callback
  
  Type: Function
  
  提示对话框上关闭后的回调函数
- type
  
  Value: ‘div’
  
  是否使用h5绘制的对话框

[

.confirm( message, title, btnValue, callback [, type] )
](#on-events-selector-data-handler)
- message
  
  Type: String
  
  提示对话框上显示的内容
- title
  
  Type: String
  
  提示对话框上显示的标题
- btnValue
  
  Type: Array
  
  提示对话框上按钮显示的内容
- callback
  
  Type: Function
  
  提示对话框上关闭后的回调函数
- type
  
  Value: ‘div’
  
  是否使用h5绘制的对话框

[

.prompt( message, placeholder, title, btnValue, callback[, type] )
](#on-events-selector-data-handler)
- message
  
  Type: String
  
  提示对话框上显示的内容
- placeholder
  
  Type: String
  
  编辑框显示的提示文字
- title
  
  Type: String
  
  提示对话框上显示的标题
- btnValue
  
  Type: Array
  
  提示对话框上按钮显示的内容
- callback
  
  Type: Function
  
  提示对话框上关闭后的回调函数
- type
  
  Value: ‘div’
  
  是否使用h5绘制的对话框

如果有定制对话框样式的需求( 只能修改h5模式对话框;))可以在mui.css中修改.mui-popup类下的样式

如果需要修改DOM结构可以按照以下方式处理.

//修改弹出框默认input类型为password 
mui.prompt('text','deftext','title',['true','false'],null,'div') 
document.querySelector('.mui-popup-input input').type='password'

[

.toast( message [,options])
](#on-events-selector-data-handler)
- message:'String' - 消息框显示的文字内容

      options: `{JSON}  - 提示消息的参数`
    [\*\*options 参数需要mui v3.5+支持](https://dev.dcloud.net.cn/mui/ui/javascript:void(0);)  
    <table><thead><tr><th>参数</th><th>说明</th><th>说明</th></tr></thead><tbody><tr><td>duration</td><td>持续显示时间,默认值 <code>short</code>(2000ms)</td><td>支持 <b>整数值</b> 和 <b>String</b> ,<br>String可选: <code>long</code>(3500ms),<code>short</code>(2000ms)</td></tr><tr><td>type</td><td>强制使用mui消息框(div模式)</td><td><code>'div'</code></td></tr></tbody></table>
    ```
     mui.toast('登陆成功',{ duration:'long', type:'div' }) 
    ```