mui alert,prompt 真机下显示原生样式问题

爱被打了一巴掌 2022-03-22 01:30 156阅读 0赞

关于mui dialog文档在这里[http://dev.dcloud.net.cn/mui/ui/\#alert][http_dev.dcloud.net.cn_mui_ui_alert]

![20190125110556361.png][]

文档中指出了mui自动判断环境，是基座中的话就是用android或者ios原生弹出框，但原生很难看，那怎么可以在基座中也显示在浏览器中看到的样式呢

原生：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70][]

h5样式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1][]

### 解决办法： ###

仔细看文档中的参数：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 2][]

alert中的第五个参数如果设置为div，则会在基座中也强制使用h5模式

其他类型弹出框也可看文档将对应参数改为div

示例：

alert：

mui.alert("请选择运营商","","","","div")

prompt：（最后第六个加"div"参数）

mui.prompt('请填写套餐'+itemName+'：', '', '套餐明细', ['确定','取消'], function(e) {
        if (e.index == 0) {
        	if(e.value != ""){
        		$("input[name="+item+"]").val(e.value);
        		$(self).append('<i class="fa fa-check-square" style="color: #4FCC61;"></i>')
        	}else{
        	}
            //info.innerText = '谢谢你的评语：' + e.value;
        } else {
           // info.innerText = '你点了取消按钮';
        }
    },'div')
    //document.querySelector('.mui-popup-input input').type='number'

注:如果想改变弹出输入框的类型，用上述注释方法即可

confirm:

mui.confirm('确认删除此情报？', '提示', ['否','是'], function(e) {
        if (e.index == 1) {
            
    	    });
        } else {
            //info.innerText = 'MUI没有得到你的认可，继续加油'
        }
    },"div")

[http_dev.dcloud.net.cn_mui_ui_alert]: http://dev.dcloud.net.cn/mui/ui/#alert
[20190125110556361.png]: /images/20220322/a0aaeea244ce4d86a9000b0a039b33fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70]: /images/20220322/15b7e48467e34942b78e0e7af6aa539e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 1]: /images/20220322/d16e689f0c6b41e698221dcdf66d244d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW56aGFuZzg2MQ_size_16_color_FFFFFF_t_70 2]: /images/20220322/843c717c27764c58b6cbe39687a1ffab.png