说明所有包裹在mui-input-row类中的input、textarea等元素都将被默认设置宽度属性为width:100%;。将label元素和上述控件控件包裹在mui-input-group中可以获得最好的排列。官方说明：https://dev.dcloud.net.cn/mui/ui/#input相应代码块mform、minput注意mui在mui.init()中会自动初始化基本控件,但是动态添加的Input组件需要重新进行初始化//实例mui('.mui-input-rowinput').input();结构实例<!--mui-input-group包裹--><formclass="mui-input-group"><!--每一行mui-input-row包裹--><divclass="mui-input-row"><label>输入框</label><inputtype="text"placeholder="请输入"></div><divclass="mui-input-row"><label>输入框</label><inputtype="text"class="mui-input-clear"placeholder="带清除按钮的输入框"></div></form>带有清除的输入框在input控件上添加mui-input-clear类<formclass="mui-input-group"><divclass="mui-input-row"><label>快速删除</label><inputtype="text"class="mui-input-clear"placeholder="带清除按钮的输入框"></div></form>密码框给input元素添加mui-input-password类即可使用<formclass="mui-input-group"><!--密码框--><divclass="mui-input-row"><label>密码框</label><inputtype="text"class="mui-input-password"placeholder="请输入"></div></form>搜索框搜索框：在mui-input-row同级添加mui-input-search类，就可以使用search控件<formclass="mui-input-group"><!--搜索框--><divclass="mui-input-rowmui-search"><inputtype="search"class="mui-input-clear"placeholder="搜索框"></div></form>表单校验HTML代码<formclass="mui-input-group"><!--表单校验--><divid="input_example"class="mui-input-group"><divclass="mui-input-row"><label>用户名：</label><inputtype="text"class="mui-input-clear"placeholder="请输入用户名"></div><divclass="mui-input-row"><label>密码：</label><inputtype="password"class="mui-input-clearmui-input-password"placeholder="请输入密码"></div><divclass="mui-button-row"><buttontype="button"class="mui-btnmui-btn-primary"id="input_check">验证</button></div></div></form>Js校验代码<scripttype="text/javascript">//绑定点击事件document.getElementById("input_check").addEventListener('click',function(){//校验结果varcheck=true;//使用each()方法校验mui("#input_exampleinput").each(function(){//若当前input为空，则alert提醒if(!this.value||this.value.trim()==""){//获取兄弟元素varlabel=this.previousElementSibling;mui.alert(label.innerText+"不允许为空");check=false;returnfalse;}});//校验通过，继续执行业务逻辑check&&mui.alert('验证通过!')})</script>注意注：始终为button按钮添加type属性，若button按钮没有type属性，浏览器默认按照type="submit"逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。
说明muiv3.0版本(含)以上的dialog控件支持换行（\n）显示有四种模式的对话框，弹出的对话框为非阻塞模式。组件名作用alert警告框confirm确认框prompt输入对话框toast消息提示框相应代码块mdalert、mdconfirm、mdprompt、mdtoast（在标签里生效）官方文档：https://dev.dcloud.net.cn/mui/ui/#dialog警告框alertalert(message,title,btnValue,callback[,type])message：提示内容title：提示的标题btnValue：弹出框按钮的文字callback：点击btnValue按钮执行的函数。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">按钮</button><pid="msg">按钮回调函数提示信息</p></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.alert("连接中断...","温馨提示：","好的",function(){msg.innerHTML="点击了确定"})})</script>确认框confirmconfirm(message,title,btnValue,callback[,type])message：提示内容title：提示的标题btnValue：弹出框按钮的文字，这里是一个数组callback：点击btnValue按钮执行的函数，通过回调函数传入的值判断点击的按钮。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">confirm弹出框按钮</button><pid="msg">按钮回调函数提示信息</p></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.confirm("是否删除","温馨提示：",["确定","取消"],function(event){//判断event来，确定点击了某个按钮if(event.index==0){msg.innerHTML="点击了确定"}else{msg.innerHTML="点击了取消"}})})</script>输入对话框promptprompt(message,placeholder,title,btnValue,callback[,type])message：提示内容placeholder：输入框的内容提示title：提示标题btnValue：弹出框按钮的文字，这里是一个数组callback：点击btnValue按钮执行的函数，通过回调函数传入的index判断点击的按钮。value判断输入的值。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">prompt弹出框按钮</button><pid="msg">按钮回调函数提示信息</p></div><scripttype="text/javascript">//获取p标签varmsg=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>消息提示框toasttoast(message[,options])message：提示内容[options]：Json；类型参数：{duration:'long',type:'div'}duration：支持两个值long(3500ms),short(2000ms)type:就默认"div"就好。实例<divclass="mui-row"><!--事件按钮--><buttonid="alert"type="button"class="mui-btnmui-btn-bluemui-btn-block">toast消息框按钮</button></div><scripttype="text/javascript">//获取p标签varmsg=document.getElementById("msg")//绑定按钮点击事件document.getElementById("alert").addEventListener("tap",function(){//弹出消息框mui.toast("点击了消息框",{duration:'long',type:'div'})})</script>
说明官网地址：https://dev.dcloud.net.cn/mui/ui/#switch开关（默认样式）快捷键：mSwitch设置mui-active类，默认为开启状态。加上mui-switch-blue，可变成蓝色主题。<divclass="mui-input-row"><label>默认开关</label><!--默认开启--><divclass="mui-switchmui-activemui-switch-blue"><divclass="mui-switch-handle"></div></div></div>开关（迷你版）就是没有开关（off、on）文字<divclass="mui-input-row"><label>迷你版开关</label><divclass="mui-switchmui-switch-minimui-active"><divclass="mui-switch-handle"></div></div></div>修改显示文字通过修改伪类的内容来修改<styletype="text/css">#switch-sex::before{content:"男";}#switch-sex.mui-active:before{content:"女";}</style><divclass="mui-input-row"><label>性别</label><divid="switch-sex"class="mui-switchmui-active"><divclass="mui-switch-handle"></div></div></div>检测开关状态主要就是查看是否包含mui-activevarisActive=document.getElementById("mySwitch").classList.contains("mui-active");if(isActive){console.log("打开状态");}else{console.log("关闭状态");}控制开关状态mui("#mySwitch").switch().toggle();
说明快捷键：mbuttonmui默认按钮为灰色色系：蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系对应五种场景，primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。默认按钮有底色<divclass="mui-content"><!--距离边框有点距离好看一点--><divclass="mui-content-padded"><!--mbutton--><h5>普通按钮</h5><buttontype="button"class="mui-btn">默认</button><buttontype="button"class="mui-btnmui-btn-primary">蓝色</button><buttontype="button"class="mui-btnmui-btn-success">绿色</button><buttontype="button"class="mui-btnmui-btn-warning">黄色</button><buttontype="button"class="mui-btnmui-btn-danger">红色</button><buttontype="button"class="mui-btnmui-btn-royal">紫色</button></div></div>无底色无底色，仅需增加.mui-btn-outlined类即可<divclass="mui-content"><divclass="mui-content-padded"><!--mbutton--><h5>无底色</h5><buttontype="button"class="mui-btnmui-btn-outlined">默认</button><buttontype="button"class="mui-btnmui-btn-primarymui-btn-outlined">蓝色</button><buttontype="button"class="mui-btnmui-btn-successmui-btn-outlined">绿色</button><buttontype="button"class="mui-btnmui-btn-warningmui-btn-outlined">黄色</button><buttontype="button"class="mui-btnmui-btn-dangermui-btn-outlined">红色</button><buttontype="button"class="mui-btnmui-btn-royalmui-btn-outlined">紫色</button></div></div>带图标数字角标的按钮可以直接在按钮上加，也能在包裹一个标签`。带图标的按钮<divclass="mui-content-padded"><h5>直接写</h5><buttontype="button"class="mui-btnmui-btn-successmui-iconmui-icon-qq"></button><h5>包裹图标</h5><buttontype="button"class="mui-btnmui-btn-success"><spanclass="mui-iconmui-icon-qq"></span></button></div>带数字角标的按钮角标的背景颜色会自动透明，需要其他颜色自己定义。<divclass="mui-content-padded"><h5>带数字角标按钮</h5><buttontype="button"class="mui-btnmui-btn-success"><span>请求成功</span><spanclass="mui-badge">12</span></button></div>加载中按钮属性名作用data-loading-textloading状态显示的文案,默认为:loadingdata-loading-iconloading状态显示的图标,默认为mui-spinner或mui-spinnermui-spinner-white（根据按钮样式自动识别），为空表示不使用icondata-loading-icon-positionloading状态显示的icon的位置,支持left/right默认left方式一：官方的写法<divclass="mui-content-padded"><h5>加载中按钮</h5><buttonid="login"type="button"class="mui-btnmui-btn-success"data-loading-text="登录中">登录</button><script>//绑定是一个事件mui(document.body).on("tap","#login",function(e){varbtn=mui(this)//改变按钮为加载中的样式btn.button("loading");//两秒后还原setTimeout(function(){//还原按钮btn.button("reset")},2000)})</script></div>方式二：使用点击事件<divclass="mui-content-padded"><h5>加载中按钮</h5><buttononclick="login(this)"type="button"class="mui-btnmui-btn-success"data-loading-text="登录中">登录</button><script>//传入thisfunctionlogin(e){varbtn=mui(e)btn.button("loading");//两秒后还原setTimeout(function(){btn.button("reset")},2000)}</script></div>方式三：事件监听<divclass="mui-content-padded"><h5>加载中按钮：事件监听</h5><buttonid="login"type="button"class="mui-btnmui-btn-success"data-loading-text="登录中">登录</button><script>document.getElementById("login").addEventListener("tap",functionlogin(e){varbtn=mui(this)btn.button("loading");//两秒后还原setTimeout(function(){btn.button("reset")},2000)})</script></div>
说明数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标官方说明：https://dev.dcloud.net.cn/mui/ui/#badges有底色<spanclass="mui-badge">12</span><spanclass="mui-badgemui-badge-purple">12</span><spanclass="mui-badgemui-badge-primary">12</span><spanclass="mui-badgemui-badge-blue">12</span><spanclass="mui-badgemui-badge-success">12</span><spanclass="mui-badgemui-badge-green">12</span><spanclass="mui-badgemui-badge-warning">12</span><spanclass="mui-badgemui-badge-yellow">12</span><spanclass="mui-badgemui-badge-danger">12</span><spanclass="mui-badgemui-badge-red">12</span>无底色无底色只需要加上mui-badge-inverted类<spanclass="mui-badgemui-badge-inverted">12</span><spanclass="mui-badgemui-badge-purplemui-badge-inverted">12</span><spanclass="mui-badgemui-badge-primarymui-badge-inverted">12</span><spanclass="mui-badgemui-badge-bluemui-badge-inverted">12</span><spanclass="mui-badgemui-badge-successmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-greenmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-warningmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-yellowmui-badge-inverted">12</span><spanclass="mui-badgemui-badge-dangermui-badge-inverted">12</span><spanclass="mui-badgemui-badge-redmui-badge-inverted">12</span>
说明mui使用的是字体图标，有官方自定义的图标，也能使用第三方图标库。内置图标地址：https://dev.dcloud.net.cn/mui/ui/#icon使用只需要引入两个类使用图标：mui-icon使用图标样式：mui-icon-名称<divclass="mui-iconmui-icon-qq"></div>使用官方扩展图标使用扩展图标需要导入扩展扩展包官方地址：https://dev.dcloud.net.cn/mui/mui-icon-extra/index.html使用在对应目录引入css/mui-icon-extra.css、fonts/mui-icons-extra.ttf首先引入样式<linkhref="css/icons-extra.css"rel="stylesheet"/>使用<!--注意这里是mui-icon-extra--><spanclass="mui-icon-extramui-icon-extra-heart-filled"></span>使用第三方字体库导入第三方需要的文件，根据第三方提供的教程使用就好。阿里字体库：https://www.iconfont.cn
基础布局快捷键补全说明：Mui快捷键适用于HBuilder下载地址：https://www.dcloud.io/hbuilderx.html头部快捷键：mHeader<!--带返回的头部--><headerclass="mui-barmui-bar-nav"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">标题</h1></header>主体快捷键：mbody<divclass="mui-content">大数据男孩</div>底部选项卡快捷键：mTab<navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-phone"></span><spanclass="mui-tab-label">电话</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-email"></span><spanclass="mui-tab-label">邮件</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-gear"></span><spanclass="mui-tab-label">设置</span></a></nav>效果