# 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 属性为 largesmall 将输入框设置为大和小尺寸,不设置为默认(中)尺寸。

<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>
显示代码 复制代码

# 事件使用以及后置分发

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

px
<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 输入框尺寸,可选值为 largesmall 或者不填 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)