mui消息框（alert,confirm,prompt,toast）的使⽤
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 = ElementById("info");
      ElementById("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 = ElementById("info");
      ElementById("confirmBtn").addEventListener('tap', function() {
      var btnArray = ['否', '是'];
      firm('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
    编辑框显⽰的提⽰⽂字
  titlemui框架常用组件有哪些
    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 = ElementById("info");
      ElementById("promptBtn").addEventListener('tap', function(e) {
      sture.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 = ElementById("info");
      ElementById("toastBtn").addEventListener('tap', function() {
      ast('欢迎体验Hello MUI');
      });
  这些提⽰框的内容你可以⾃⼰使⽤标签代码来布局你想要提⽰的展现样⼦，可以⾃定义样式，具体代码如下：
  我们拿confirm这个⽅法来举例说明下（其余⽅法都和这个⼀样）：
  html代码还是之前那个⼀样。
  js：
    var info = ElementById("info");
    ElementById("confirmBtn").addEventListener('tap', function() {
    var btnArray = ['否', '是'];
    var message = '<h6>MUI是个好框架，确认？</h6>';
    firm(message, 'Hello MUI', btnArray, function(e) {
    if (e.index == 1) {
    info.innerText = '你刚确认MUI是个好框架';
    } else {
    info.innerText = 'MUI没有得到你的认可，继续加油'
    }
    },'div');
    });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。