mui 总结
Posted xiewangfei123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui 总结相关的知识，希望对你有一定的参考价值。
折叠面板：accordion
代码激活字符：maccordion
可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含 .mui-collapse 类的 li 节点上
增加 .mui-active 类即可；
操作表：actionsheet
代码激活字符：mactionsheet
actionsheet 一般从底部弹出，显示一系列可供用户选择的操作按钮，actionsheet 是从 popover 控件基础上演变而来，实际
上就是一个固定从底部弹出的 popover ，故 DOM 结构和 popover 类似，只是需要在含 .mui-popover 类的节点上增加
mui-popover-bottom、.mui-popover-action 类；
数字角标：badge
代码激活字符：mbadge
数字角标一般和其他控件(列表、9宫格、选项卡等)配合使用，用于进行数量提示、角标的核心类是 .mui-badge ，默认为实心灰
色背景，同时，mui还内置了蓝色(blue)、绿色(gree)、黄色(yellow）、红色(red)、紫色(purple)五种色系的数字角标，
mui-badge-primary 蓝色
mui-badge-success 绿色
mui-badge-warning 黄色
mui-badge-danger 红色
mui-badge-purple 紫色
.mui-badge-inverted 加上此类可以清楚底色
按钮：button
代码激活字符：mbutton
mui 默认按钮为灰色，另外还提供了蓝色、绿色、黄色、红色、紫色五种色系的按钮，五种色系对应五种场景，分别为primary、
success、warning、danger、royal；使用 .nui-btn 类即可生成一个默认按钮，继续添加 .mui-btn 颜色值或者 .mui-btn
场景可生成对应色系的按钮。
.mui-btn-outlined 实现无底色，有边框的按钮
加载中按钮：
data-loading-text loading 状态显示的文案,默认为: loading
data-loading-icon loading 状态显示的icon,默认为mui-spinner或mui-spinner mui-spinner-white（根据按钮样式自动识别），为空表示不使用icon
data-loading-icon-position loading 状态显示的icon的位置,支持left/right默认left
卡片视图：cardview
使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区，页脚三部分组成
mui-card-header 页眉
mui-card-content 内容区
mui-card-footer 页脚
卡片页眉及内容区，都支持放置图片，页眉放置图片 需要加 mui-card-media
在页眉中写入丰富的信息，如头像、主标题、副标题 需要加 mui-media-body
复选框：checkbox
代码激活字符：mcheckbox
用处：常用于多选的情况
mui-left 左侧显示checkbox
disabled 禁用checkbox
消息框：
警告框：mdalert
确认框：mdconfirm
输入对话框：mdprompt
消息提示框：mdtoast
图片轮播：
代码激活字符：mslider
如需要支持循环，则在 .mui-slider-group 加 .mui-slider-loop
栅格：grid
超小屏幕 < 400 mui-col-xs-[1-12] 激活代码 mcolxs
小屏幕 >= 400 mui-col-sm-[1-12] 激活代码 mcolsm
图标：icon
代码块激活字符: micon
表单：input
快速删除：只需要在input控件上添加.mui-input-clear类，当input 控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；
密码框：给input元素添加.mui-input-password类
列表：list
代码块激活字符: mlist
只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可
若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可
遮罩蒙版：mask
代码块激活字符: mmask
mui默认的蒙版遮罩使用.mui-backdrop类定义，若需自定义遮罩效果，只需覆盖定义.mui-backdrop
数字输入框：number box
代码块激活字符： mnumbox
初始化：mui在mui.init()中会自动初始化基本控件,但是 动态添加的Numbox组件需要手动初始化
属性：
data-numbox-min 输入框允许使用的最小值，默认无限制
data-numbox-max 输入框允许使用的最大值，默认无限制
data-numbox-step 每次点击 +/- 按钮变化的步长，默认步长为1
方法名：
getValue() 获取当前值
setValue(value) 动态设置新值
setOption(options) 更新选项，可取值
侧滑导航： offcanvas
代码块激活字符: moffcanvas
js API：
方法名：
show() 显示
close() 隐藏
toggle() 切换
事件监听：
事件名：
shown 显示
hidden 隐藏
方法：
isShown() 判断是否为显示状态
弹出菜单：popover
代码块激活字符: mpopover
js的方式控制弹出菜单：mui(‘.bottomPopover‘).popover(status[,anchor]);
status：
show 显示popover
hidden 隐藏popover
toggle 自动识别处理显示隐藏状态
anchor：
anchorElement 锚点元素
选择器：picker
进度条：progressbar
代码块激活字符: mprogressbar
有准确值的进度条：
有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间
使用进度条控件，需要一个进度条控件容器，mui 会自动识别该容器下是否有进度条控件，若没有，则自动创建
透明状态栏：transparenBar
代码块激活字符: mtransparent
个性化定制属性:
data-top 距离顶部高度
data-offset 滚动透明距离
data-duration 过渡时间
data-scrollby 监听区域滚动容器
单选框：radio
代码块激活字符: mradio
mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可
列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点
滑块：range
代码块激活字符: mrange
区域滚动：scroll
轮播组件：slide
代码块激活字符: mslider
轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。首先，Dom构造基本相同
开关：switch
代码块激活字符: mswitch
默认开关控件,带on/off文字提示，打开时为绿色背景，基本class类为.mui-switch、.mui-switch-handle
若希望开关默认为打开状态，只需要在.mui-switch节点上增加.mui-active类即可
若希望隐藏on/off文字提示，变成简洁模式，需要在.mui-switch节点上增加.mui-switch-mini类
mui默认还提供了蓝色开关控件，只需在.mui-switch节点上增加.mui-switch-blue类即可
方法：
若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态
若使用js打开、关闭开关控件，可使用switch插件的toggle()方法
事件：
开关控件在打开/关闭两种状态之间进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，可以在开关切换时执行特定业务逻辑
初始化：
mui在mui.init()中会自动初始化基本控件,但是 动态添加的 Switch 组件需要手动初始化
以上是关于mui 总结的主要内容，如果未能解决你的问题，请参考以下文章