mui使用笔记

mui.toast(data[1],{duration:5000}); 指指对话框消失的时间
–使用mui搜索框触发手机软键盘搜索按钮事件
要虚拟键盘显示“搜索”二字,需满足以下两个条件:
(1)设置input属性 type=‘search’
(2)input需在form表单中。
<form action=””>
<div class=”mui-input-row mui-search”>
<input id=”search” type=”search” class=”mui-input-clear” placeholder=”输入关键字搜索”>
</div>
</form>
若是实现点击”搜索”,实现搜索事件,需要对按键进行监听。注意要点:
(1)监听事件类型“keypress”
(2)event.keyCode == “13”
(3)event.preventDefault(); // 阻止默认事件—阻止页面刷新(表单提交)

document.getElementById(“search”).addEventListener(“keypress”,function(event) {
if(event.keyCode == “13”) {
document.activeElement.blur();//收起虚拟键盘
toSearch();//TODO 完成搜索事件
event.preventDefault(); // 阻止默认事件—阻止页面刷新
}
});

–mui 弹层

.mui-modal {top:300px !important;} 用来控制距离顶部高度
.mui-content{overflow-y:auto;} 用来控制内容溢出后的自动上下滚动
用脚本控制打开层关闭层$(“#modal”).addClass(“mui-active”) $(“#modal”).removeClass(“mui-active”)

就是浮层的背景遮罩效果暂时还不知道怎么弄

mui是好东西,但是文档真的太弱了,这个modal 都是藏在例子中的。。。。

再提供下这个例子的路径 :https://dcloud.io/hellomui/examples/modals.html
–搜索框点两次才能进入加下面代码
<style>
.mui-search .mui-placeholder {
pointer-events: none;
}
</style>

 –对话框要return   

mui.prompt(‘请输入’,null,”,[‘取消’,’确定’],function(e) {
if (e.index!=1){return;}
func1(e.value);
});
在func1内执行完要写上return 不然对话框消失后会把点击事件传向下一个层。


发表评论

电子邮件地址不会被公开。 必填项已用*标注