numbox(数字输入框) MUI-----https://dev.dcloud.net.cn/mui/ui/#numbox
mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值;默认numbox控件dom结构比较简单,如下:
<div class="mui-numbox">
<!-- "-"按钮,点击可减小当前数值 -->
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<!-- "+"按钮,点击可增大当前数值 -->
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
可通过data-*自定义属性设置数字输入框的参数,如下:
示例:设置取值范围为0~100,每次变化步长为10,则代码如下
<div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='10'>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" value="1"/>
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>