InputNumber 数字输入框

基础用法

支持传入 step 精度，以及指定取值范围 max , min。默认 step 取整数 1

InputNumber数字输入框 - 图1

  1. <p class="demo-desc">基本输入框</p>
  2. <div class="row no-gutter">
  3.   <div class="col-md-4">
  4.     <at-input-number v-model="num"></at-input-number><br>
  5.   </div>
  6. </div>
  7. <p class="demo-desc">有取值范围的输入框，min=0, max=5</p>
  8. <div class="row no-gutter">
  9.   <div class="col-md-4">
  10.     <at-input-number :min="0" :max="5"></at-input-number>
  11.   </div>
  12. </div>

不可用状态

设置属性 disabled 禁用输入框

InputNumber数字输入框 - 图2

<div class="row no-gutter">
  <div class="col-md-4">
    <at-input-number disabled></at-input-number>
  </div>
</div>

小数输入

参数 step 可以配置成小数

InputNumber数字输入框 - 图3

<p class="demo-desc">step=0.3, min=1</p>
<div class="row no-gutter">
  <div class="col-md-4">
    <at-input-number v-model="num2" :step="0.3" :min="1"></at-input-number>
  </div>
</div>

不同尺寸

配置属性 size，可控制输入框的尺寸，默认支持三种尺寸：large，normal，small

InputNumber数字输入框 - 图4

<div class="row">
  <div class="col-sm-12 col-md-4">
    <at-input-number size="small"></at-input-number>
  </div>
  <div class="col-sm-12 col-md-4">
    <at-input-number></at-input-number>
  </div>
  <div class="col-sm-12 col-md-4">
    <at-input-number size="large"></at-input-number>
  </div>
</div>

InputNumber 参数

参数说明类型可选值默认值
value输入框的值，可通过 v-model 绑定Number--
size输入框尺寸Stringsmall, normal, largenormal
step每次递增或递减的数目Number-1
min最小值Number--Infinity
max最大值Number-Infinity
disabled是否禁用输入框Boolean-false
readonly是否设置成只读Boolean-false
autofocus是否自动聚焦到输入框Boolean-false

InputNumber 事件

事件名称说明返回值
focus获得焦点时触发event
blur失去焦点时触发event
change绑定的值有变化时触发输入框的值