数字输入框 InputNumber

赞助

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

何时使用

• 当需要获取标准数值时

基本使用

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<InputNumber v-model:value.lazy="value" />

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
const lazyValue = ref(6)
watchEffect(() => {
  console.log('value', value.value)
})
watchEffect(() => {
  console.log('lazyValue', lazyValue.value)
})
function onChange(number: number | null) {
  console.log('change', number)
}
function onEnter(e: KeyboardEvent) {
  console.log('enter', e)
}
</script>
<template>
  <Space gap="small" vertical>
    <InputNumber
      :width="120"
      v-model:value="value"
      placeholder="Basic usage"
      @change="onChange"
      @enter="onEnter"
    />
    <InputNumber
      :width="120"
      v-model:value.lazy="lazyValue"
      placeholder="Lazy usage"
      @change="onChange"
      @enter="onEnter"
    />
  </Space>
</template>

非受控模式

不传 v-model:value，用 defaultValue 指定初始值；输入、步进与精度格式化照常生效；placeholder 只是占位提示，不能替代初值

Show Code

<template>
  <InputNumber :width="120" :default-value="5" :precision="2" />
</template>

步数为小数

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <InputNumber :step="0.1" v-model:value="value" />
</template>

设置数值精度

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <InputNumber :step="0.3" :precision="2" v-model:value="value" />
</template>

格式化展示

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { formatNumber } from 'vue-amazing-ui'
const formatValue1 = ref(1000)
const formatValue2 = ref(100)
watchEffect(() => {
  console.log('formatValue1', formatValue1.value)
})
watchEffect(() => {
  console.log('formatValue2', formatValue2.value)
})
function formatter(value: string | number): string {
  return formatNumber(value, 2) + '%'
}
function parser(value: string): number {
  return Number(value.replace(/[,%]/g, ''))
}
</script>
<template>
  <Space>
    <InputNumber
      :width="120"
      v-model:value="formatValue1"
      :formatter="(value: string) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
      :parser="(value: string) => value.replace(/\$\s?|(,*)/g, '')"
    />
    <InputNumber
      :width="120"
      v-model:value="formatValue2"
      :formatter="formatter"
      :parser="parser"
    />
  </Space>
</template>

自定义最大最小值

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <InputNumber :min="0" :max="10" v-model:value="value" />
</template>

添加前缀图标 $

$

Show Code

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const value = ref(3)
watchEffect(() => {
  console.log('value', value.value)
})
</script>
<template>
  <InputNumber prefix="$" v-model:value="value" />
</template>

禁用

disabled:

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(3)
const disabled = ref(true)
</script>
<template>
  <Space vertical>
    <Space align="center">disabled: <Switch v-model:value="disabled" /></Space>
    <InputNumber v-model:value="value" :disabled="disabled" />
  </Space>
</template>

APIs

InputNumber Props

名称	说明	类型	默认值
width	数字输入框宽度，单位 px	string | number	90
min	最小值	number	-Infinity
max	最大值	number	Infinity
step	每次改变步数，可以为小数	number	1
precision	数值精度	number	0
prefix	前缀图标	string	undefined
formatter	指定展示值的格式	(value: number | string) => string	undefined
parser	指定从 formatter 里转换回数字的方式，和 formatter 搭配使用	(value: string) => number	undefined
keyboard	是否启用键盘快捷键行为（上方向键增，下方向键减）	boolean	true
disabled	是否禁用	boolean	false
placeholder	数字输入的占位符	string	undefined
value v-model	当前值；传入即受控（null 表示空值），不传时组件自持（可用 defaultValue 指定初值）	number | null	undefined
defaultValue	非受控初始值，未绑 v-model:value 时生效，null 表示空值；与 value 同样按 precision / formatter 展示	number | null	undefined

Slots

名称	说明	用法
prefix	自定义前缀图标	v-slot:prefix

Events

名称	说明	类型
change	变化回调，清空输入时传出 null	(value: number | null) => void
enter	按下回车的回调	(e: KeyboardEvent) => void
focus	数字输入框获取焦点时的回调，relatedTarget 为失去焦点的元素	(e: FocusEvent) => void
blur	数字输入框失焦的回调，relatedTarget 为获得焦点的元素	(e: FocusEvent) => void

Methods

名称	说明	类型
focus	获取数字输入框焦点	() => void
blur	使数字输入框失去焦点	() => void