mui消息框alert，confirm，prompt，toast

左手的ㄟ右手 2022-09-25 05:28 226阅读 0赞

最近做订餐系统实现了一个小例子，就是手机能二次订餐，学习到了一点小知识分享一下。

弹出框中有“取消” 、“确定” 两个按钮，通过这个功能对弹出框的功能进行了延伸的学习。

#     mui消息框alert，confirm，prompt，toast #

<span style="font-family:FangSong_GB2312;font-size:14px;">script type="text/javascript" charset="utf-8">
                //mui初始化
                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(); //修复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 = '你点了取消按钮';
                        }
                    })
                });
                document.getElementById("toastBtn").addEventListener('tap', function() {
                    mui.toast('欢迎体验Hello MUI');
                });
            </script></span>