参考
数字输入 Number Input
NumberInput:数字输入。步进按钮和输入框合为一个控件,中间由发丝线分隔,数字使用等宽数字。部件:Root、Label、Control、Input、ValueText、IncrementTrigger、DecrementTrigger、Scrubber。
Root · Label · Input · Control · ValueText · IncrementTrigger · DecrementTrigger · Scrubber
#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 | 无障碍元素及其状态使用的本地化文案 |
| 事件 | 载荷 |
|---|---|
focusChange | details: FocusChangeDetails |
valueChange | details: ValueChangeDetails |
update:modelValue | value: string |
valueInvalid | details: ValueInvalidDetails |
#Scrubber
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#ValueText
纯造型的部件——自身没有属性,沿用部件结构的共享样式。