MUI实现常用的几类对话框

左手的ㄟ右手 2024-04-17 15:59 44阅读 0赞

# 引言 #

在开发行业中，对话框可以说是无处不在的了。在开发界我们一般把对话框分成警告框、确认框、输入框和自动消失的提示框。

比如用户无意中点击了关闭按钮，这是我们的程序不能傻乎乎的就关闭了，我们得弹出一个提示框，询问用户是否真的要关闭，

否则又得被用户吐槽了，所以在这里笔者记录了一下几种对话框，方便自己日后查阅，如果能帮助到大家那就再好不过了。

**实现效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70][]

警告框

mui.alert('message','title','btnValue',callback,'div')

> message ： 提示语
> 
> title          ：标题
> 
> btnValue ：按钮的显示内容
> 
> callback ： 回调函数
> 
> div         ： 以div的形式显示弹窗

确认框

mui.confirm('message','title',btnValue,callback,'div')

> message ： 提示语
> 
> title          ：标题
> 
> btnValue ：按钮的显示内容，数组的形式，如：\['取消','确认'\]
> 
> callback ： 回调函数
> 
> div         ： 以div的形式显示弹窗

输入对话框

mui.prompt('message','defaultText','title',btnValue,callback,'div')

> message    ：提示语
> 
> defaultText ：编辑框提示语
> 
> title             ：标题
> 
> btnValue     ：按钮的显示内容，数组的形式，如：\['取消','确认'\]
> 
> callback      ： 回调函数
> 
> div              ： 以div的形式显示弹窗

自动显示提示框

mui.toast('message')

> message    ：提示语

**案例源码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>对话框</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<meta name="apple-mobile-web-app-capable" content="yes">
    		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    		<link rel="stylesheet" href="css/mui.min.css">
    		<style>
    			.mui-btn {
    				display: block;
    				width: 120px;
    				margin: 10px auto;
    			}
    			
    			#info {
    				padding: 20px 10px;
    			}
    		</style>
    
    	</head>
    
    	<body>
    		<header class="mui-bar mui-bar-nav">
    			<h1 class="mui-title">对话框</h1>
    		</header>
    		<div class="mui-content">
    			<div class="mui-content-padded" style="margin: 5px;text-align: center;">
    				<button id='alert-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
    				<button id='confirm-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
    				<button id='prompt-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
    				<button id='toast-btn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
    				<div id="info"></div>
    			</div>
    		</div>
    		<script src="js/mui.min.js"></script>
    		<script type="text/javascript" charset="utf-8">
    			// mui初始化
    			mui.init({
    				swipeBack: true 
    			});
    			
    			// 提示语
    			var info = document.getElementById("info");
    			
    			// 警告信息框
    			document.getElementById("alert-btn").addEventListener('tap', function() {
    				mui.alert('这是一个警告信息', '警告框', function() {
    					info.innerText = '警告被关闭了';
    				});
    			});
    			
    			// 确认信息框
    			document.getElementById("confirm-btn").addEventListener('tap', function() {
    				var btnArray = ['否', '是'];
    				mui.confirm('我是大帅哥', '确认框', btnArray, function(e) {
    					if (e.index == 1) {
    						info.innerText = '你说的对';
    					} else {
    						info.innerText = '你撒谎'
    					}
    				})
    			});
    			
    			// 输入信息框
    			document.getElementById("prompt-btn").addEventListener('tap', function(e) {
    				e.detail.gesture.preventDefault(); 
    				var btnArray = ['取消', '确定'];
    				mui.prompt('约么', '好呀', '输入框', btnArray, function(e) {
    					if (e.index == 1) {
    						info.innerText = e.value;
    					} else {
    						info.innerText = '真的不约么?';
    					}
    				})
    			});
    			
    			// 自动消息信息框
    			document.getElementById("toast-btn").addEventListener('tap', function() {
    				mui.toast('我会自己消失哦');
    			});
    		</script>
    	</body>
    
    </html>

GitHub：

> [https://github.com/lwqbrell/mui\_dialog\_box][https_github.com_lwqbrell_mui_dialog_box]

下载链接：

> 链接：[https://pan.baidu.com/s/1lVzRa15lucRyd8KvWJ88mQ ][https_pan.baidu.com_s_1lVzRa15lucRyd8KvWJ88mQ]  
> 提取码：95ay

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/01ddce7d43d5445b9ebb63b2a7fe8123.png
[https_github.com_lwqbrell_mui_dialog_box]: https://github.com/lwqbrell/mui_dialog_box
[https_pan.baidu.com_s_1lVzRa15lucRyd8KvWJ88mQ]: https://pan.baidu.com/s/1lVzRa15lucRyd8KvWJ88mQ%C2%A0