使用方法

NumberInput 是一个专门用于数字输入的组件，提供最小最大值限制、精度控制等功能。用户可以手动输入数字；需要加减按钮时加上 hasNumberSteppers。

基本用法只需要绑定一个数字值：

<script setup lang="ts">
import { NumberInput } from '@astryx-vue/core/NumberInput'
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <NumberInput v-model="count" :min="0" :max="100" />
</template>

通过 min 和 max 属性设置数值范围，step 设置每次增减的步长。超出范围的值会被限制在有效区间内。步进按钮使用向上和向下的箭头。按钮的无障碍名称默认是英文，调用 provideAstryxLocale('zh-CN') 后改为中文；如果传了 label，名称里会带上它。

还有三个属性让字段贴合它装的数字：isIntegerOnly 让小数进不了值；formatValue 让字段闲着时显示易读的样子，比如 1234 件，聚焦后换回原始数字；isWheelEnabled={false} 让滚轮只滚页面、不改数值。

解剖

部分	说明
标签	数字输入的标签。
说明	标签下面的补充说明。
图标	输入框里的可选图标。
占位	输入为空时显示的占位文字。
数字步进	可选按钮，按配置的步长加减。

最佳实践

指引	实践
推荐	为数值范围明确的场景设置 min 和 max。
推荐	根据实际需求设置合理的步长，如数量用 1，价格用 0.01。
推荐	在标签中说明单位（如"数量（件）"），而不是把单位放在输入框内。
避免	对大范围数值使用过小的步长，会让用户点击按钮很多次。

示例

可清除

Progress

%

进度从 0 到 100，带百分号和清除按钮。

范围

Team Size

Number of people on the team

团队人数限制在 1 到 50，并说明这个数字代表什么。

校验状态

Budget

Must be a positive amount

Headcount

Exceeds typical team size

Completion

%

On track

预算、人数和完成度上的错误、警告和成功。

单位

Discount

%

带百分号的折扣，范围是 0 到 100。