mui 之 对话框

说明

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

四种模式的对话框,弹出的对话框为非阻塞模式

组件名 作用
alert 警告框
confirm 确认框
prompt 输入对话框
toast 消息提示框

相应代码块 mdalertmdconfirmmdpromptmdtoast(在

官方文档: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>

mark

确认框 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>

mark

输入对话框 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>

mark

消息提示框 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>

mark

发表评论 / Comment

用心评论~