## Counter

### 基本用法

```html
<v-counter v-model="count"></v-counter>
```
```javascript
export default {
  data() {
    return {
      count: 1,
    };
  },
}
```
#### 设置最小 / 最大值 / 步数
最小值设置 `min` 默认值为 `1` ，最大值设置 `max`， 设置步数 `step`
```html
<v-counter v-model="count" min="2" max="10" step="2"></v-counter>
```
#### 输入框输入时 当输入小于最小值 或 大于最大值时 会调用 `limited` 属性， 这是一个回调函数，参数为一个包含 ``min``、 ``max``、 ``input`` 的对象，通过他们之间的对比，可以达到提示用户的目的。
```html
<v-counter
  v-model="count"
  min="2"
  max="6"
  :limited="overLimitHandle"
></v-counter>
<span style="color:red">{{limiteTip}}</span>

<script>
  export default {
    data() {
      return {
        count: 3,
        limitTip: '',
      };
    },
    methods: {
      overLimitHandle(limitInfo) {
        const { min, max, input } = limitInfo;
        if (input < min) {
          this.limitTip = `可输入最小值为${min}`;
        } else if (input > max) {
          this.limitTip = `可输入最大值为${max}`;
        }
        setTimeout(() => {
          this.limitTip = '';
        }, 3000);
      },
      countChange(count) {
        console.log(count);
      },
    },
  }
</script>
```

#### 禁用
通过 `disabled` 属性来禁用 ``Counter``； 通过 ``disable-input`` 属性禁止输入框输入。
```html
<v-counter v-model="count" :disabled="true"></v-counter>
<v-counter v-model="count" :disable-input="true"></v-counter>
```


### Attributes

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| min  | 最小值  | string, Number   | 正整数   | 1 |
| max  | 最大值  | string, Number   | 正整数   | Infinity |
| step  | 步数   | string, Number   |    | 1 |
| disabled  | 是否禁用  | boolean   | true, false | false |
| disable-input | 输入框是否禁用    | boolean   | true, false | false |
| limited  | 输入时 值大于最大值 或 小于最小值时触发的回调函数    | function   | function(info) info 是一个对象 包括{ min, max, input }, input: 用户输入的值 |  |

### 事件
| 事件名称  | 说明  | 回调参数  |
|--------  |----- |--------- |
| change   | counter值产生变化时的回调函数  | function(count)  |
| blur     | 输入框失去焦点时触发           | function(count)  |