MUI dialog（对话框）

一时失言乱红尘 2023-07-19 12:30 41阅读 0赞

dialog（对话框）

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

Dialog 组件包含:

<table> 
 <thead> 
  <tr> 
   <th>组件名</th> 
   <th>作用</th> 
   <th>快速体验</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="http://dev.dcloud.net.cn/mui/ui/#alert" rel="nofollow">alert</a></td> 
   <td>警告框</td> 
   <td>警告框</td> 
  </tr> 
  <tr> 
   <td><a href="http://dev.dcloud.net.cn/mui/ui/#confirm" rel="nofollow">confirm</a></td> 
   <td>确认框</td> 
   <td>确认框</td> 
  </tr> 
  <tr> 
   <td><a href="http://dev.dcloud.net.cn/mui/ui/#prompt" rel="nofollow">prompt</a></td> 
   <td>输入对话框</td> 
   <td>输入对话框</td> 
  </tr> 
  <tr> 
   <td><a href="http://dev.dcloud.net.cn/mui/ui/#toast" rel="nofollow">toast</a></td> 
   <td>消息提示框</td> 
   <td>自动消失提示框</td> 
  </tr> 
 </tbody> 
</table>

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

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

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

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

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

*  #### .prompt( message, placeholder, title, btnValue, callback\[, type\] ) ####
    
     *  **message**
        
        Type:  [String][]
        
        提示对话框上显示的内容
     *  **placeholder**
        
        Type:  [String][]
        
        编辑框显示的提示文字
     *  **title**
        
        Type:  [String][]
        
        提示对话框上显示的标题
     *  **btnValue**
        
        Type:  [Array][String]
        
        提示对话框上按钮显示的内容
     *  **callback**
        
        Type:  [Function][String]
        
        提示对话框上关闭后的回调函数
     *  **type**
        
        Value:  ['div'][String]
        
        是否使用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\]) ####
    
     *  message: `'String' - 消息框显示的文字内容`
        
          options: ` {JSON}  - 提示消息的参数`
        
        \*\*options 参数需要mui v3.5+支持
        
        <table> 
         <thead> 
          <tr> 
           <th>参数</th> 
           <th>说明</th> 
           <th>说明</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>duration</td> 
           <td>持续显示时间,默认值&nbsp;<code>short</code>(2000ms)</td> 
           <td>支持&nbsp;<b>整数值</b>&nbsp;和&nbsp;<b>String</b>&nbsp;,<br> String可选:&nbsp;<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' })

*  #### .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>

[closepopup]: http://dev.dcloud.net.cn/mui/ui/#closepopup
[String]: http://dev.dcloud.net.cn/mui/ui/