Skip to content

数字输入框

@astryxdesign/core v0.7.1 · NumberInput

NumberInput Props ​

名称类型默认值说明
modelValuenumber | nullnull当前值。空值是 null。
labelstring—字段标签,同时作为无障碍名称。
descriptionstring—标签下方的说明。
placeholderstring''占位文本。
minnumber | null—最小值。离开或按 Enter 时,比它小的输入收到这个值。输入过程中先标成无效。
maxnumber | null—最大值。离开或按 Enter 时,比它大的输入收到这个值。输入过程中先标成无效。
stepnumber | null1每次增减的步长。
hasNumberSteppersbooleanfalse在输入框末尾显示加、减按钮。这一步不会改变值时,对应按钮置灰。
isWheelEnabledbooleantrue输入框聚焦时,滚轮是否改变值。页面滚动应该优先的场景把它关掉。
isIntegerOnlybooleanfalse只提交整数。写小数时文字留在框里,离开输入框后丢弃。键盘也切到数字键盘。
formatValue(value: number) => string—未聚焦时显示的文本,例如 (v) => `${v} 件`。聚焦后显示原始数字方便编辑,格式化后的文本通过 aria-valuetext 暴露给读屏。
unitsstring | null—显示在输入框末尾的单位,例如 %。
hasClearbooleanfalse有值时显示清除按钮。提示只说「清除」,读屏名称带字段名。清除后值为 null。把内容删空后离开,只有开了这个按钮才会提交 null,否则回到原值。
isDisabledbooleanfalse是否禁用。
disabledMessagestring—禁用原因。与 isDisabled 一起用时,悬停或键盘聚焦会显示提示;输入框通过 aria-disabled 保持可聚焦,不会被移出 Tab 顺序。
isReadOnlybooleanfalse值照常显示、照常提交,但不能编辑。只读时方向键、滚轮、加减按钮全部关闭。和 isDisabled 同时设置时以禁用以准。
isOptionalbooleanfalse字段可选。与 isRequired 互斥。
isRequiredbooleanfalse字段必填。与 isOptional 互斥。
isLabelHiddenbooleanfalse标签只留给读屏,页面上不显示。
labelTooltipstring—标签末尾信息图标里的提示文本。
labelIconComponent—标签文字前的图标。也可以用 labelIcon 插槽。
startIconComponent—输入框起始位置的图标。也可以用 icon 插槽。
size'sm' | 'md' | 'lg''md'尺寸。
widthnumber | string—整个字段的宽度,标签和状态说明一起对齐。数字按像素算,字符串原样使用,例如 '100%'。
status'default' | 'error' | 'warning' | 'success' | { type, message? }—校验状态。对象带 message 时,说明会显示在字段下方。
statusVariant'attached' | 'detached' | 'tooltip''attached'状态说明的呈现方式。'tooltip' 不显示说明框,改为从状态图标里点开。
htmlNamestring—表单字段名。
autoCompletestring—原生 autocomplete 属性。
hasAutoFocusbooleanfalse挂载后自动聚焦输入框。
idstring—输入框元素的 id。不传时自动生成。
disabledbooleanfalse等同于 isDisabled。
disabledReasonstring—等同于 disabledMessage。
clearablebooleanfalse等同于 hasClear。
namestring—等同于 htmlName。
containerClassstring | object | array—加到字段外壳的 class。没有外壳时不生效,开发环境会警告。在 InputGroup 和横向标签的 FormLayout 里也是这样。
containerStyleStyleValue—加到字段外壳的行内样式。
controlClassstring | object | array—加到数字框本体的 class。直接写在组件上的 class 也落在本体,不会警告。
controlStyleStyleValue—加到数字框本体的行内样式。直接写在组件上的 style 也落在本体。

NumberInput 事件 ​

名称载荷说明
update:modelValuevalue: number | null值变化时触发。
changevalue: number | null值变化时触发。null 表示用户清空了输入框。
focusevent: FocusEvent输入框获得焦点时触发。
blurevent: FocusEvent输入框失去焦点时触发。
enterevent: KeyboardEvent在输入框里按回车时触发。
keydownevent: KeyboardEvent输入框按键时触发,方向键步进之前发出。在回调里调用 preventDefault() 可以阻止这次步进。

NumberInput 插槽 ​

名称说明
icon输入框起始位置的图标。
labelIcon标签文字前的图标。