## WC-NUMBER
> 通过鼠标或键盘输入数字。



### 基础用法

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-number type="primary" ></wc-number>
  <wc-number type="info" ></wc-number>
  <wc-number type="success" ></wc-number>
  <wc-number type="warning" ></wc-number>
</wc-space>
<wc-space>
  <wc-number ></wc-number>
  <wc-number type="help" ></wc-number>
  <wc-number type="secondary" ></wc-number>
  <wc-number type="danger"></wc-number>
</wc-space>
  </wc-lang>
    <wc-lang slot="css">
    wc-number{ width:200px; }
  </wc-lang>
</wc-sandbox>


### 尺寸大小

5种尺寸规则的输入框, 如果不满足自己的需求, 可以自行设置`width`和`height`。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-number size="xxxl" placeholder="xxxl Size"></wc-number>
  <wc-number size="xxl" placeholder="xxl Size"></wc-number>
  <wc-number size="xl" placeholder="xl Size">xl Size</wc-number>
  <wc-number  placeholder="Deault Size"></wc-number>
  <wc-number size="m" placeholder="Medium Size"></wc-number>
</wc-space>
  </wc-lang>
</wc-sandbox>




### 状态
文本框有2种状态, `readonly` 和 `disabled`, 这2种状态下, value值都无法被修改。
<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-number  ></wc-number>
  <wc-number  readonly></wc-number>
  <wc-number  disabled></wc-number>
</wc-space>
  </wc-lang>
  <wc-lang slot="css">
    wc-number{ width:250px; }
  </wc-lang>
</wc-sandbox>


### 圆角
`round`属性, 可以让数字文本框变成圆角。
<br/><br/>



<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
import '//jscdn.ink/@bd/ui/latest/icon/index.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-number  round ></wc-number>
  <wc-number class="slot-number" round>
      <div slot="prepend">
       <wc-icon name="user" style="--size:18px;" />
      </div>
    </wc-number>
</wc-space>
<wc-space>
    <wc-number class="slot-number" >
        <div slot="append">@163.com</div>
    </wc-number>
    <wc-number class="slot-number" >
      <div slot="prepend">
       <wc-icon name="user" style="--size:18px;" />
      </div>
      <div slot="append">@163.com</div>
    </wc-number>
</wc-space>
  </wc-lang>

  <wc-lang slot="css">
    wc-number{ width:300px; }
    div[slot='prepend']{
      padding:0 10px;
      border-right:1px solid var(--color-grey-a);
    }
    div[slot='append']{
      padding:0 10px;
      border-left:1px solid var(--color-grey-a);
    }
  </wc-lang>
</wc-sandbox>

### 设置步数
`step`属性接受一个`Number`,设置此值后，鼠标和方向键只能输入步数的倍数
<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-number step="2"></wc-number>
</wc-space>
  </wc-lang>
  <wc-lang slot="css">
    wc-number{ width:250px; }
  </wc-lang>
</wc-sandbox>






### 完整APIs

|  属性  |  值类型  |   默认值   |     描述   |
|  :-:  |   :-:   |   :-:   |     -   |
|  value |  String |  无    | 输入框绑定值	 |
|  type  |  String  |   无   |   输入框类型, 仅能决定输入框的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger`   |
|  size  |   String   |  default   |   输入框尺寸, 可选值有: `xxxl、xxl、xl、l、m`   |
|  autofocus  |   Boolean  | false   |  输入框的加载状态, 为`true`时, 输入框会自动获得焦点 |
|  disbaled  |   Boolean  | false   |  输入框的禁用状态, 为`true`时, value不可更改 |
|  readonly  |   Boolean  | false   | 输入框的只读状态, 为`true`时value不可更改。|
|  round  |   无  |  无   |  为输入框设置大圆角半径。 不需要赋值   |
|  max  |   Number  |  无   | value最大值  |
|  min  |   Number  |  无   | value最小值  |
|  step|  Number | 无 |  输入框步长	 |
|  lazy  |   Number  |  0   |  为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发`submit`，`input`事件  |

### 事件
| 事件名 | 说明 | 回调参数 |
|  :-:  |   :-:   |   :-:   |     -   |
| input | 输入值时触发 | (event: Event) |
| submit | 按回车时触发 | (event: Event) |