数字输入 Number Input

#基础用法

number-input/basic Vue React

Quantity

number-input/basic.vue

<script setup lang="ts">
import { chevron_down, chevron_up, pause } from "@bysages/icons";
import { Icon, NumberInput } from "@bysages/vue";
</script>

<template>
  <NumberInput.Root default-value="42" :min="0" :max="100">
    <NumberInput.Label>Quantity</NumberInput.Label>
    <NumberInput.Control>
      <NumberInput.Input />
      <NumberInput.Scrubber>
        <Icon :glyph="pause" />
      </NumberInput.Scrubber>
      <NumberInput.IncrementTrigger aria-label="Increment">
        <Icon :glyph="chevron_up" />
      </NumberInput.IncrementTrigger>
      <NumberInput.DecrementTrigger aria-label="Decrement">
        <Icon :glyph="chevron_down" />
      </NumberInput.DecrementTrigger>
    </NumberInput.Control>
  </NumberInput.Root>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#DecrementTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#IncrementTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Input

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	输入框和步进器使用的控件高度档位
`allowMouseWheel`	`boolean`		是否允许鼠标滚轮改变数值
`allowOverflow`	`boolean`	`true`	是否允许值超出 min/max 范围
`clampValueOnBlur`	`boolean`	`true`	输入框失焦时是否把值限制回 min/max 范围
`defaultValue`	`string`		输入框的初始值；适合不需要受控值的场景
`disabled`	`boolean`		是否禁用数字输入框
`focusInputOnChange`	`boolean`	`true`	数值变化时是否聚焦输入框
`form`	`string`		输入元素关联的表单
`formatOptions`	`Intl.NumberFormatOptions`		传给 `Intl.NumberFormat` 构造函数的选项
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; label: string; input: string; incrementTrigger: string; decrementTrigger: string; scrubber: string; }>`		数字输入框各元素的 id，便于组合使用
`inputMode`	`'text' \| 'tel' \| 'numeric' \| 'decimal'`	`"decimal"`	提示用户可能输入的数据类型，也决定移动设备显示的键盘类型
`invalid`	`boolean`		数字输入框的值是否无效
`largeStep`	`number`	`10 * step`	按住 Shift 时每次增减的幅度
`locale`	`string`	`"en-US"`	当前语言环境，基于 BCP 47 标准
`max`	`number`	`Number.MAX_SAFE_INTEGER`	数字输入框的最大值
`min`	`number`	`Number.MIN_SAFE_INTEGER`	数字输入框的最小值
`modelValue`	`string`		数字输入框的 v-model 值
`name`	`string`		数字输入框的 name 属性，用于表单提交
`pattern`	`string`	`"[0-9]*(.[0-9]+)?"`	用于校验 `<input>` 元素值的模式
`readOnly`	`boolean`		数字输入框是否只读
`required`	`boolean`		数字输入框是否必填
`smallStep`	`number`	`step / 10`	按住 Alt 时每次增减的幅度
`spinOnPress`	`boolean`	`true`	按下增加或减少按钮时是否连续调整数值
`step`	`number`	`1`	每次增减数值的幅度
`translations`	`numberInput.IntlTranslations`		无障碍元素及其状态使用的本地化文案

#Scrubber

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ValueText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。