mui消息框(alert,confirm,prompt,toast)的使用

Posted 2021-01-24 wdbgqq

mui消息框(alert,confirm,prompt,toast)的使用
　　在开发mui的过程中，我们最经常用到的就是消息框，例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让我们失望，这些都做好了封装

alert(警告框)
　　用法：
　　　　.alert( message, title, btnValue, callback [, type] )

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　title

　　　　Type: String

　　　　提示对话框上显示的标题

　　btnValue

　　　　Type: String

　　　　提示对话框上按钮显示的内容

　　callback

　　　　Type: String

　　　　提示对话框上关闭后的回调函数

　　type

　　　　Value: ‘div’

　　　　是否使用h5绘制的对话框

　　示例代码：
　　　　html:

　　　　　　<button id=‘alertBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("alertBtn").addEventListener(‘tap‘, function() {
　　　　　　mui.alert(‘欢迎使用Hello MUI‘, ‘Hello MUI‘, function() {
　　　　　　info.innerText = ‘你刚关闭了警告框‘;
　　　　　　　　});
　　　　　　});　　
confirm(确认框)
　　用法：
　　　　.confirm( message, title, btnValue, callback [, type] )

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　title

　　　　Type: String

　　　　提示对话框上显示的标题

　　btnValue

　　　　Type: String

　　　　提示对话框上按钮显示的内容

　　callback

　　　　Type: String

　　　　提示对话框上关闭后的回调函数

　　type

　　　　Value: ‘div’

　　　　是否使用h5绘制的对话框

　　示例代码：
　　　　html:

　　　　　　<button id=‘confirmBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("confirmBtn").addEventListener(‘tap‘, function() {
　　　　　　var btnArray = [‘否‘, ‘是‘];
　　　　　　mui.confirm(‘MUI是个好框架，确认？‘, ‘Hello MUI‘, btnArray, function(e) {
　　　　　　if (e.index == 1) {
　　　　　　info.innerText = ‘你刚确认MUI是个好框架‘;
　　　　　　} else {
　　　　　　info.innerText = ‘MUI没有得到你的认可，继续加油‘
　　　　　　}
　　　　　　})
　　　　　　});
prompt(对话框)
　　用法：
　　.prompt( message, placeholder, title, btnValue, callback[, type] )

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　placeholder

　　　　Type: String

　　　　编辑框显示的提示文字

　　title

　　　　Type: String

　　　　提示对话框上显示的标题

　　btnValue

　　　　Type: String

　　　　提示对话框上按钮显示的内容

　　callback

　　　　Type: String

　　　　提示对话框上关闭后的回调函数

　　type

　　　　Value: ‘div’

　　　　是否使用h5绘制的对话框

　　示例代码：
　　　　html:

　　　　　　<button id=‘promptBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("promptBtn").addEventListener(‘tap‘, function(e) {
　　　　　　e.detail.gesture.preventDefault(); //修复ios 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
　　　　　　var btnArray = [‘取消‘, ‘确定‘];
　　　　　　mui.prompt(‘请输入你对MUI的评语：‘, ‘性能好‘, ‘Hello MUI‘, btnArray, function(e) {
　　　　　　if (e.index == 1) {
　　　　　　info.innerText = ‘谢谢你的评语：‘ + e.value;
　　　　　　} else {
　　　　　　info.innerText = ‘你点了取消按钮‘;
　　　　　　}
　　　　　　})
　　　　　　});
　　
toast(消息提示框)
　　用法：
　　　　.toast( message [,options])

　　message

　　　　Type: String

　　　　提示对话框上显示的内容

　　options

　　　　Type: JSON

　　　　提示消息的参数

　　示例代码：
　　　　html:

　　　　　　<button id=‘toastBtn‘ type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
　　　　　　<div id="info"></div>
　　　　js:

　　　　　　var info = document.getElementById("info");
　　　　　　document.getElementById("toastBtn").addEventListener(‘tap‘, function() {
　　　　　　mui.toast(‘欢迎体验Hello MUI‘);
　　　　　　});

　　这些提示框的内容你可以自己使用标签代码来布局你想要提示的展现样子，可以自定义样式，具体代码如下：

　　我们拿confirm这个方法来举例说明下（其余方法都和这个一样）：

　　html代码还是之前那个一样。

　　js：

　　　　var info = document.getElementById("info");
　　　　document.getElementById("confirmBtn").addEventListener(‘tap‘, function() {
　　　　var btnArray = [‘否‘, ‘是‘];
　　　　var message = ‘<h6>MUI是个好框架，确认？</h6>‘;
　　　　mui.confirm(message, ‘Hello MUI‘, btnArray, function(e) {
　　　　if (e.index == 1) {
　　　　info.innerText = ‘你刚确认MUI是个好框架‘;
　　　　} else {
　　　　info.innerText = ‘MUI没有得到你的认可，继续加油‘
　　　　}
　　　　},‘div‘);
　　　　});