MUI提供了alert、confirm和prompt三种类型的对话框组件，用于显示提示信息、进行确认操作或获取用户输入。对话框可配置为原生或H5模式，原生对话框支持跨webview，而H5模式则提供统一样式且可自定义。用户点击按钮后对话框关闭，并通过callback回调返回按钮索引或输入值。此外，MUI.css允许用户修改H5模式对话框的样式，而toast方法用于显示轻提示，closePopups则用于关闭所有H5模式的对话框。
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] )
-
.confirm( message, title, btnValue, callback [, type] )
-
.prompt( message, placeholder, title, btnValue, callback[, type] )
如果有定制对话框样式的需求( 只能修改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])
-
message:
'String' - 消息框显示的文字内容options:{JSON} - 提示消息的参数**options 参数需要mui v3.5+支持
参数 说明 说明 duration 持续显示时间,默认值 short(2000ms)支持 整数值 和 String ,
String可选:long(3500ms),short(2000ms)type 强制使用mui消息框(div模式) 'div'mui.toast('登陆成功',{ duration:'long', type:'div' })
-
-
.closePopups()(只能关闭h5模式的对话框)
-
关闭所有对话框
-
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MUI dialog(对话框)</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">MUI dialog(对话框)</h1>
</header>
<br>
<br>
<br>
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<div id="info"></div>
<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<div id="info"></div>
<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<div id="info"></div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: true //启用右滑关闭功能
});
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap', function() {
mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
info.innerText = '你刚关闭了警告框';
});
});
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没有得到你的认可，继续加油'
}
})
});
document.getElementById("promptBtn").addEventListener('tap', function(e) {
e.detail.gesture.preventDefault(); //使用plus.nativeUI.prompt会造成输入法闪一下又没了
var btnArray = ['取消', '确定'];
mui.prompt('请输入你对MUI的评语：', '性能好', 'Hello MUI', btnArray, function(e) {
if (e.index == 1) {
info.innerText = '谢谢你的评语：' + e.value;
} else {
info.innerText = '你点了取消按钮';
}
})
});
document.getElementById("toastBtn").addEventListener('tap', function() {
mui.toast('欢迎体验Hello MUI');
});
</script>
</body>
</html>
扫一扫
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
