# InputNumber 数字输入框

# InputNumber 概述

使用鼠标或键盘输入一定范围的标准数值。

# InputNumber 代码演示

# 基础用法

可以通过输入、鼠标点击或键盘的上下键来改变数值大小。

<template>
  <div slot="demo">
    <h-input-number :max="10" :min="1" v-model="value1"></h-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 1,
    };
  },
};
</script>

复制代码

# 小数

通过设置 step 属性控制每次改变的精度。

<template>
  <div slot="demo">
    <h-input-number
      :max="10"
      :min="1"
      :precision="2"
      :step="1.2"
      v-model="value2"
    ></h-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value2: 1,
    };
  },
};
</script>

复制代码

# 尺寸

通过设置 size 属性为 large 和 small 将输入框设置为大和小尺寸，不设置为默认（中）尺寸。

<template>
  <div slot="demo">
    <h-input-number v-model="value3" size="small"></h-input-number>
    <h-input-number v-model="value4"></h-input-number>
    <h-input-number v-model="value5" size="large"></h-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value3: 2,
      value4: 2,
      value5: 2,
    };
  },
};
</script>

复制代码

# 不可用

通过设置 disabled 属性禁用输入框，点击按钮切换状态。
通过设置 readonly 设置只读状态，点击按钮切换状态。

<template>
  <div slot="demo">
    <h-input-number v-model="value6" :disabled="disabled"></h-input-number>
    <h-button type="primary" @click="disabled = !disabled"
      >Toggle Disabled</h-button
    >
    <h-input-number :readonly="readonly"></h-input-number>
    <h-button type="primary" @click="readonly = !readonly"
      >Toggle readonly</h-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: true,
      readonly: true,
      value6: 1,
    };
  },
};
</script>

复制代码

# 事件使用以及后置分发

数值改变时的回调，返回当前值。

<template>
  <div slot="demo">
    <h-input-number v-model="value6" @on-change="onChange">
      <span slot="append">px</span>
    </h-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value6: 1,
    };
  },
  methods: {
    onChange(value) {
      console.log(value);
    },
  },
};
</script>

复制代码

# 删除或者清空后置为 0 或者最小值

删除或者清空后置为 0，若有最小值则置为最小值。

最小值为2:

<template>
  <div slot="demo">
    <h-input-number v-model="value7" setzero></h-input-number>
    <span>最小值为2:</span>
    <h-input-number v-model="value8" setzero :min="2"></h-input-number>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value7: 5,
      value8: 2,
    };
  },
  methods: {},
};
</script>

复制代码

# InputNumber API

# InputNumber props

属性	说明	类型	默认值
max	最大值	Number	Number.MAX_SAFE_INTEGER(9007199254740991)
min	最小值	Number	Number.MIN_SAFE_INTEGER(-9007199254740991)
value	当前值，可以使用 v-model 双向绑定数据	Number	1
step	每次改变的步伐，可以是小数	Number	1
size	输入框尺寸，可选值为 `large` 和 `small` 或者不填	String	-
disabled	设置禁用状态	Boolean	false
readonly	设置只读状态	Boolean	false
precision	数值精度，有效值为 0-20。如果需要实现立即更新 DOM，则需要绑定一个唯一 key 值来管理可复用的元素，实现元素间的独立性。	Number	-
setzero	删除或者清空后置为 0 或者最小值	Boolean	false
notScientificNotation	禁止以科学计数法显示数字 (v1.0.33)	Boolean	false
tabindex	设置输入框 tabindex (v1.0.4)	String \| Number	-1
focusAllSelect	聚焦时全选中控件内容 (v1.0.48)	Boolean	false
initNotShowNumber	初始化时，当 value 值是 null 时，输入框不显示 0 或者最小值 (v1.0.73)	Boolean	false

# InputNumber events

事件名	说明	返回值
on-change	数值改变时的回调，返回当前值	当前值
on-focus	输入框获取焦点时触发，返回当前事件	当前事件
on-blur	输入框失去焦点时触发，返回当前事件	当前事件

# InputNumber slot

名称	说明
append	后置内容,设置后置内容时请设置默认宽度 (v1.0.28)