# ui-form-number-box 数字输入框组
版本：v2.3.11
数字输入框组件用于输入数字，支持自定义步长、范围和格式化
# 基本使用
<template>
<div class="form-number-box-demo">
<ui-form-number-box v-model="value" />
<p>当前值：{{ value }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(0);
</script>
<style scoped>
.form-number-box-demo {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
</style>
# Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | Number | 0 | 当前 |
min | Number | -Infinity | 最小 |
max | Number | Infinity | 最大 |
step | Number | 1 | 步长 |
precision | Number | 0 | 小数位数 |
disabled | Boolean | false | 是否禁用 |
readonly | Boolean | false | 是否只读 |
controls | Boolean | true | 是否显示增减按钮 |
controlsPosition | String | 'right' | 增减按钮位置，可选值：left、right |
# Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
change | 值变化时触发 | (value: Number) 当前 |
input | 实时输入时触 | (value: Number) 当前 |
focus | 获得焦点时触 | (event: Event) 焦点事件对象 |
blur | 失去焦点时触 | (event: Event) 失去焦点事件对象 |
# 示例
# 带范围限制的数字输入
<template>
<div class="form-number-box-demo">
<ui-form-number-box v-model="value" :min="0" :max="100" :step="5" />
<p>当前值：{{ value }}（范围：0-100，步长：5/p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(0);
</script>