InputNumber 数字输入框

通过鼠标或键盘，输入范围内的数值。

代码演示

基础用法

数字输入框。

当前值：3

<template>
  <div>
    <a-input-number id="inputNumber" v-model:value="value" :min="1" :max="10" />
    当前值：{{ value }}
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(3);
</script>

不可用

点击按钮切换可用状态。

<template>
  <div>
    <a-input-number v-model:value="value" :min="1" :max="10" :disabled="disabled" />
    <div style="margin-top: 20px">
      <a-button type="primary" @click="toggle">Toggle disabled</a-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(3);
const disabled = ref(true);
const toggle = () => {
  disabled.value = !disabled.value;
};
</script>

高精度小数

通过 stringMode 开启高精度小数支持，change 事件将返回 string 类型。 对于旧版浏览器，你需要 BigInt polyfill。

<template>
  <a-input-number
    v-model:value="value2"
    style="width: 200px"
    :min="0"
    :max="10"
    :step="0.00000000000001"
    string-mode
  />
</template>
<script setup>
import { ref } from 'vue';
const value = ref('1');
</script>

格式化展示

通过 formatter 格式化数字，以展示具有具体含义的数据，往往需要配合 parser 一起使用。

<template>
  <a-space>
    <a-input-number
      v-model:value="value1"
      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
    />
    <a-input-number
      v-model:value="value2"
      :min="0"
      :max="100"
      :formatter="value => `${value}%`"
      :parser="value => value.replace('%', '')"
    />
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value1 = ref(1000);
const value2 = ref(100);
</script>

键盘行为

使用 keyboard 属性可以控制键盘行为。

Toggle keyboard

<template>
  <a-space>
    <a-input-number v-model:value="value" :keyboard="keyboard" :min="1" :max="10" />
    <a-checkbox v-model:checked="keyboard">Toggle keyboard</a-checkbox>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(3);
const keyboard = ref(true);
</script>

超出边界

当通过受控将 value 超出边界时，提供警告样式。

<template>
  <a-space>
    <a-input-number v-model:value="value" :min="1" :max="10" />
    <a-button type="primary" @click="value = 99">Reset</a-button>
  </a-space>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(99);
</script>

自定义状态

使用 status 为 InputNumber 添加状态，可选 error 或者 warning。

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-input-number status="error" style="width: 100%" />
    <a-input-number status="warning" style="width: 100%" />
  </a-space>
</template>
<script setup>
export {};
</script>

API

属性如下

成员	说明	类型	默认值
addonAfter	带标签的 input，设置后置标签	slot	-
addonBefore	带标签的 input，设置前置标签	slot	-
autofocus	自动获取焦点	boolean	false
bordered	是否有边框	boolean	true
controls	是否显示增减按钮	boolean	true
decimalSeparator	小数点	string	-
defaultValue	初始值	number
disabled	禁用	boolean	false
formatter	指定输入框展示值的格式	function(value: number | string, info: { userTyping: boolean, input: string }): string	-
keyboard	是否启用键盘快捷行为	boolean	true
max	最大值	number	Infinity
min	最小值	number	-Infinity
parser	指定从 formatter 里转换回数字的方式，和 formatter 搭配使用	function( string): number	-
precision	数值精度	number	-
prefix	带有前缀图标的 input	slot	-
size	输入框大小	string	-
status	设置校验状态	'error' | 'warning'	-
step	每次改变步数，可以为小数	number | string	1
stringMode	字符值模式，开启后支持高精度小数。同时 change 事件将返回 string 类型	boolean	false
upIcon	自定义上箭头图标	slot	<UpOutlined />
downIcon	自定义下箭头图标	slot	<DownOutlined />
value(v-model)	当前值	number

事件

事件名称	说明	回调参数
change	变化回调	Function(value: number | string)
pressEnter	按下回车的回调	function(e)
step	点击上下箭头的回调	(value: number, info: { offset: number, type: 'up'

方法

名称	描述
blur()	移除焦点
focus()	获取焦点