InputNumber 数字输入框

数字输入组件，支持范围限制、步长、小数精度、自定义格式化。hover 或 focus 时显示 +/- 步进按钮，也支持键盘 ↑↓ 操作。

基础用法

基础数字输入框，hover 显示 +/- 步进按钮

vue

<template>
  <div style="width: 180px">
    <AInputNumber placeholder="请输入数字" />
  </div>
</template>

<script setup lang="ts">
import { AInputNumber } from '@lite-code/aui-vue'
</script>

受控用法

当前值：0

通过 v-model 双向绑定

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 180px">
    <AInputNumber v-model="val" />
    <p style="font-size: 13px; color: #666">当前值：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AInputNumber } from '@lite-code/aui-vue'

const val = ref<number | null>(0)
</script>

范围限制

设置 min / max 限制可输入的数值范围，失焦时自动 clamp，超出边界的步进按钮自动置灰。

当前值：

min=0 max=10，超出边界自动修正

vue

<template>
  <div style="width: 180px">
    <AInputNumber v-model="val" :min="0" :max="10" placeholder="0 ~ 10" />
    <p style="margin-top: 8px; font-size: 13px; color: #666">当前值：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AInputNumber } from '@lite-code/aui-vue'

const val = ref<number | null>(null)
</script>

步长

通过 step 控制每次点击 +/- 或按键盘 ↑↓ 的增减量，默认为 1。

step=1 / 5 / 10

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 180px">
    <AInputNumber :step="1" placeholder="step=1（默认）" />
    <AInputNumber :step="5" placeholder="step=5" />
    <AInputNumber :step="10" placeholder="step=10" />
  </div>
</template>

<script setup lang="ts">
import { AInputNumber } from '@lite-code/aui-vue'
</script>

小数精度

设置 precision 控制小数位数，失焦时自动格式化到指定精度。

precision=2 和 precision=3

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 180px">
    <AInputNumber :precision="2" placeholder="精度 2 位小数" />
    <AInputNumber :precision="3" placeholder="精度 3 位小数" />
  </div>
</template>

<script setup lang="ts">
import { AInputNumber } from '@lite-code/aui-vue'
</script>

格式化

通过 formatter 和 parser 自定义显示格式，适合金额、百分比等场景。

¥ 金额格式 与 % 百分比格式

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 200px">
    <AInputNumber
      v-model="money"
      :formatter="fmtMoney"
      :parser="parseMoney"
      :precision="2"
      placeholder="¥ 金额"
    />
    <AInputNumber
      v-model="percent"
      :formatter="fmtPercent"
      :parser="parsePercent"
      :min="0"
      :max="100"
      placeholder="% 百分比"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AInputNumber } from '@lite-code/aui-vue'

const money = ref<number | null>(null)
const percent = ref<number | null>(null)

const fmtMoney = (v: number | null) => v === null ? '' : `¥ ${v.toFixed(2)}`
const parseMoney = (s: string) => {
  const n = parseFloat(s.replace(/[¥\s,]/g, ''))
  return isNaN(n) ? null : n
}

const fmtPercent = (v: number | null) => v === null ? '' : `${v}%`
const parsePercent = (s: string) => {
  const n = parseFloat(s.replace('%', ''))
  return isNaN(n) ? null : n
}
</script>

尺寸

提供三种尺寸：sm、md（默认）、lg。

三种尺寸

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 180px">
    <AInputNumber size="sm" placeholder="小尺寸 sm" />
    <AInputNumber size="md" placeholder="中尺寸 md（默认）" />
    <AInputNumber size="lg" placeholder="大尺寸 lg" />
  </div>
</template>

<script setup lang="ts">
import { AInputNumber } from '@lite-code/aui-vue'
</script>

前缀与后缀

通过 prefix 和 suffix 传入单位或图标。

￥元

kg

前缀/后缀

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; width: 200px">
    <AInputNumber prefix="￥" suffix="元" placeholder="金额" />
    <AInputNumber suffix="kg" placeholder="重量" />
  </div>
</template>

<script setup lang="ts">
import { AInputNumber } from '@lite-code/aui-vue'
</script>

禁用状态

禁用状态

vue

<template>
  <div style="width: 180px">
    <AInputNumber disabled :model-value="42" />
  </div>
</template>

<script setup lang="ts">
import { AInputNumber } from '@lite-code/aui-vue'
</script>

API

Props

属性	类型	默认值	说明
modelValue	number | null	—	受控值（配合 v-model 使用）
defaultValue	number | null	—	非受控默认值
min	number	—	最小值，超出时自动 clamp
max	number	—	最大值，超出时自动 clamp
step	number	1	步长，点击 +/- 或 ↑↓ 键时的增减量
precision	number	—	小数精度，失焦时自动格式化
size	'sm' | 'md' | 'lg'	'md'	输入框尺寸
disabled	boolean	false	是否禁用
prefix	string	—	前缀文本（也可用 #prefix 插槽）
suffix	string	—	后缀文本（也可用 #suffix 插槽）
placeholder	string	—	占位文字
formatter	(value: number | null) => string	—	自定义显示格式，需配合 parser 使用
parser	(displayValue: string) => number | null	—	将 formatter 输出解析回数字

Events

事件名	参数	说明
update:modelValue	(value: number | null)	v-model 双向绑定更新
change	(value: number | null)	值变化回调，失焦或点击步进按钮后触发
blur	(e: FocusEvent)	失焦回调

Slots

插槽名	说明
prefix	自定义前缀内容
suffix	自定义后缀内容

键盘交互

按键	行为
↑	增加一个步长
↓	减少一个步长
Enter	确认当前输入值