# Numeric Input 数值输入

[toc]

数值输入组件提供快捷输入数值的功能，可以设置最大值、最小值、步长等等。

## 组件引入

在`app.json`或页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-list": "../../dist/list/index",
    "tea-item": "../../dist/item/index",
    "tea-numeric-input": "../../dist/numeric-input/index"
  }
}
```

## 用法

-   基本用法

```html
<tea-numeric-input name="params" value="1"></tea-numeric-input>
```

-   设置最大值和最小值

```html
<tea-numeric-input name="params" min="5" max="10"></tea-numeric-input>
```

-   设置步长

```html
<tea-numeric-input name="params" min="1" max="20" step="2"></tea-numeric-input>
```

-   禁用状态

```html
<tea-numeric-input name="params" min="1" max="20" step="2" disabled></tea-numeric-input>
```

-   绑定事件

```html
<tea-numeric-input
  name="params"
  bind:change="change"
  bind:overlimit="overlimit"
  bind:plus="plus"
  bind:minus="minus"
  bind:input="input"
  min="5"
  max="20"
>
</tea-numeric-input>
```

-   与List 组件结合

```html
<tea-list title="与List 组件结合">
  <tea-item title="选择数字">
    <tea-numeric-input name="params" value="1"></tea-numeric-input>
  </tea-item>
</tea-list>
```

## Props

| 参数       | 描述        | 类型        | 默认值                       |
| -------- | --------- | --------- | ------------------------- |
| name     | 提交表单时的标志符 | `String`  | -                         |
| value    | 当前值       | `Number`  | -                         |
| min      | 最小值       | `Number`  | `0`                       |
| max      | 最大值       | `Number`  | `Number.MAX_SAFE_INTEGER` |
| step     | 步长        | `Number`  | `1`                       |
| disabled | 是否禁用      | `Boolean` | `false`                   |

## 事件

| 事件名       | 描述        | 回调参数    |
| --------- | --------- | ------- |
| change    | 绑定值变化触发   | 标志符和当前值 |
| overlimit | 不可用的时候触发  | 标志符     |
| plus      | 点击增加按钮时触发 | 标志符     |
| minus     | 点击减少按钮时触发 | 标志符     |
| input     | 输入数字的时候触发 | 标志符和当前值 |

## 外部样式类

| 类名          | 说明       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                             | 默认值                         | 描述  |
| ------------------------------- | --------------------------- | --- |
| numeric-input-height            | 28px                        | -   |
| numeric-input-border-color      | @form-border-color          | -   |
| numeric-input-button-size       | @font-size-default          | -   |
| numeric-input-button-text-color | @text-primary-color         | -   |
| numeric-input-padding-bottom    | 2px                         | -   |
| numeric-input-width             | 48px                        | -   |
| numeric-input-text-size         | @font-size-sm               | -   |
| numeric-input-text-color        | @text-color                 | -   |
| numeric-input-margin            | 2px                         | -   |
| numeric-input-background-color  | @form-background-base-color | -   |

## 演示

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/932ut7mU70cc)