mui 之 对话框

说明

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

有四种模式的对话框，弹出的对话框为非阻塞模式。

相应代码块 mdalert、mdconfirm、mdprompt、mdtoast（在

官方文档：https://dev.dcloud.net.cn/mui/ui/#dialog

警告框 alert

alert( message, title, btnValue, callback [, type] )

• message：提示内容
• title：提示的标题
• btnValue：弹出框按钮的文字
• callback：点击btnValue 按钮执行的函数。

实例

<div class="mui-row">
     <!-- 事件按钮 -->
    <button id="alert" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
    <p id="msg">按钮回调函数提示信息</p>
</div>

<script type="text/javascript">
    // 获取 p 标签
    var msg = document.getElementById("msg")
    // 绑定按钮点击事件
    document.getElementById("alert").addEventListener("tap",function(){
        // 弹出消息框
        mui.alert("连接中断...","温馨提示：","好的",function(){
            msg.innerHTML = "点击了确定"
        })
    })
</script>

确认框 confirm

confirm( message, title, btnValue, callback [, type] )

• message：提示内容
• title：提示的标题
• btnValue：弹出框按钮的文字，这里是一个数组
• callback：点击btnValue 按钮执行的函数，通过回调函数传入的值判断点击的按钮。

实例

<div class="mui-row">
     <!-- 事件按钮 -->
    <button id="alert" type="button" class="mui-btn mui-btn-blue mui-btn-block">confirm 弹出框 按钮</button>
    <p id="msg">按钮回调函数提示信息</p>
</div>

<script type="text/javascript">

    // 获取 p 标签
    var msg = document.getElementById("msg")
    // 绑定按钮点击事件
    document.getElementById("alert").addEventListener("tap",function(){
        // 弹出消息框
        mui.confirm("是否删除","温馨提示：",["确定","取消"],function(event){
            // 判断 event 来，确定点击了 某个按钮
            if(event.index == 0){
                msg.innerHTML = "点击了确定"
            }else{
                msg.innerHTML = "点击了取消"
            }
        })
    })
</script>

输入对话框 prompt

prompt( message, placeholder, title, btnValue, callback[, type] )

• message：提示内容
• placeholder：输入框的内容提示
• title：提示标题
• btnValue：弹出框按钮的文字，这里是一个数组
• callback：点击btnValue 按钮执行的函数，通过回调函数传入的index判断点击的按钮。value 判断输入的值。

  实例

<div class="mui-row">
     <!-- 事件按钮 -->
    <button id="alert" type="button" class="mui-btn mui-btn-blue mui-btn-block">prompt 弹出框 按钮</button>
    <p id="msg">按钮回调函数提示信息</p>
</div>

<script type="text/javascript">
    // 获取 p 标签
    var msg = document.getElementById("msg")
    // 绑定按钮点击事件
    document.getElementById("alert").addEventListener("tap",function(){
        // 弹出消息框
        mui.prompt("你输入你反馈建议：","","反馈建议",["完成","取消"],function(event){
            if(event.index == 0){
                // 通过 event.value 获取输入框的值
                msg.innerHTML = "点击了完成" + "输入内容：" + event.value
            }else{
                msg.innerHTML = "点击了取消"
            }
        })
    })
</script>

消息提示框 toast

toast( message [,options])

• message：提示内容
• [options]：Json；类型参数：{ duration:'long', type:'div' }
  • duration：支持两个值long(3500ms),short(2000ms)
  • type:就默认 "div" 就好。

实例

<div class="mui-row">
     <!-- 事件按钮 -->
    <button id="alert" type="button" class="mui-btn mui-btn-blue mui-btn-block">toast 消息框 按钮</button>
</div>

<script type="text/javascript">
    // 获取 p 标签
    var msg = document.getElementById("msg")
    // 绑定按钮点击事件
    document.getElementById("alert").addEventListener("tap",function(){
        // 弹出消息框
        mui.toast("点击了消息框",{ duration:'long', type:'div' })
    })
</script>