InputNumber 计数器

仅允许输入标准的数字值，可定义范围。

基础用法

要使用它，只需要在 ZcInputNumber 元素中使用 v-model 绑定变量即可。

<template>
  <ZcInputNumber v-model="num" :min="1" :max="10" />
</template>
<script setup>
import { ref } from 'vue'
const num = ref(1)
</script>

禁用状态与步长

通过 disabled 设置禁用，step 设置步长。

<template>
  <ZcInputNumber v-model="num1" :step="2" />
  <ZcInputNumber v-model="num2" disabled />
</template>
<script setup>
import { ref } from 'vue'
const num1 = ref(5)
const num2 = ref(1)
</script>

精度与按钮位置

通过 precision 设置精度，controls-position 改变控制按钮位置。

<template>
  <ZcInputNumber v-model="num1" :precision="2" :step="0.1" :max="10" />
  <ZcInputNumber v-model="num2" controls-position="right" />
</template>
<script setup>
import { ref } from 'vue'
const num1 = ref(1.5)
const num2 = ref(1)
</script>

InputNumber API

Props

参数	说明	类型	默认值
modelValue	绑定值	number | undefined	undefined
min	设置计数器允许的最小值	number	-Infinity
max	设置计数器允许的最大值	number	Infinity
step	计数器步长	number	1
stepStrictly	是否只能输入 step 的倍数	boolean	false
precision	数值精度	number	undefined
disabled	是否禁用	boolean	false
controls	是否使用控制按钮	boolean	true
controlsPosition	控制按钮位置	'' | 'right'	''
size	计数器尺寸	'large' | 'medium' | 'small'	'medium'
placeholder	输入框占位文本	string	''
readonly	是否只读	boolean	false

Events

事件名	说明	回调参数
change	绑定值被改变时触发	(currentValue, oldValue)
input	输入时触发	(value)
blur	失去焦点时触发	(event: FocusEvent)
focus	获取焦点时触发	(event: FocusEvent)

Expose

方法名	说明	参数
focus	使 input 获取焦点
blur	使 input 失去焦点
increase	增加数值
decrease	减少数值