Input Number 数字输入框

数字输入框用于输入数量、金额、比例、排序值等数字。VISTA B 直接使用 Element Plus 的 el-input-number，需要明确最小值、最大值和步长，避免用户输错范围。

基础用法

使用 v-model 绑定数字值，通过 min 和 max 限制范围。

<script setup>
import { ref } from 'vue'

const value = ref(1)
</script>

<template>
  <el-input-number v-model="value" :min="1" :max="10" />
</template>

步长

用 step 设置每次增减的数值。适合楼层、排序、数量这类固定增减的字段。

<el-input-number v-model="value" :step="5" :min="0" :max="100" />

小数精度

用 precision 控制小数位数，常用于金额、面积、比例。

<el-input-number v-model="value" :precision="2" :step="0.1" :min="0" />

控制按钮位置

设置 controls-position="right" 后，增减按钮会放在右侧，更适合紧凑表单。

<el-input-number
  v-model="value"
  controls-position="right"
  :min="0"
  :max="99"
/>

禁用状态

设置 disabled 后，数字不可修改。

<el-input-number v-model="value" disabled />

API

Input Number 属性

属性	说明	类型	默认值
model-value / v-model	绑定值	number	空
min	最小值	number	-Infinity
max	最大值	number	Infinity
step	步长	number	1
precision	小数位数	number	空
disabled	是否禁用	boolean	false
controls	是否显示控制按钮	boolean	true
controls-position	控制按钮位置	right / 空	空

Input Number 事件

事件	说明
change	绑定值变化时触发
focus	获得焦点时触发
blur	失去焦点时触发