numbox(数字输入框)

优质

小牛编辑

134浏览

2023-12-01

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-numbox*自定义属性设置数字输入框的参数，如下：

Data API

属性名	作用
data-numbox-min	输入框允许使用的最小值，默认无限制
data-numbox-max	输入框允许使用的最大值，默认无限制
data-numbox-step	每次点击“+”、“-”按钮变化的步长，默认步长为1

示例：设置取值范围为0~100，每次变化步长为10，则代码如下

<div class="mui-numbox" data-numbox-step='10' data-numbox-min='0' data-numbox-max='100'>
  <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>

JS API

方法名	作用	示例
`getValue()`	获取当前值	getValue()
`setValue(Value)`	动态设置新值 `Int`	setValue(Value)
`setOption(options)`	更新选项,可取值: `min(Int)`,`step(Int)`,`max(Int)`	setOption(options)

示例: getValue()
document.querySelector('#btn').addEventListener('click',function () { mui.toast('当前值为:'+ mui('#numbox_demo1').numbox().getValue()) })

mui(Selector).numbox().getValue()

示例: setValue()
var num = 5; document.querySelector('#btn2').addEventListener('click', function() { mui('#numbox_demo2').numbox().setValue(num+=5) })

mui(Selector).numbox().setValue(5)

示例: setOption()
设置步长(step)为5 document.querySelector('#btn3').addEventListener('click',function () { mui('#numbox_demo3').numbox().setOption('step',5) })

mui(Selector).numbox().setOption('step',5)

初始化：

mui在mui.init()中会自动初始化基本控件,但是动态添加的Numbox组件需要手动初始化

mui(Selector).numbox()

扩展阅读

可接收小数点的数字输入框 NumberBox
代码块激活字符 mnumbox