NumberField
数字输入。行为层是 Reka 的 NumberField:打字只放行能组成数字的字符,方向键 / 滚轮(聚焦时)/ 步进按钮改值,PageUp / PageDown 十步、Home / End 到头,显示与解析走 Intl.NumberFormat。Reka 没有的拖动改值在它之上补。
表单档
默认带 −/+ 步进按钮。format-options 就是 Intl.NumberFormat 的选项:百分比(style: 'percent',值是 0–1,框里显示 85%)、单位、货币、小数位都在这里定,打字输入同一套格式解析回来。打字默认不吸附到 step,要吸附加 step-snapping。
编辑器档
属性面板里一格挨一格的紧凑格子(Figma 式):关掉 controls,框内给定宽前缀——icon 图标或 short 一个字,各格的数值从同一条竖线起,悬停前缀看全名(label)。按住前缀左右拖动改值,drag="field" 时整格都能拖(缩放条的百分比:按下先不聚焦,拖了是调值、没拖松手才进入输入)。拖起来锁住指针,能一直拖不撞屏幕边,画一个假光标在视口里循环;按住 Shift 放大 greatly 倍(默认 10)。curve 可换掉线性映射,如缩放的指数手感。
点进框里全选(改数值多半是整个换掉),再点才放光标。整片面板的默认外观用 XConfigProvider 设一次。
按住前缀(缩放框是整格)左右拖动改值,Shift 十倍;input 0 次 / commit 0 次
提交节奏
打字只在回车或失焦时发 commit——每敲一位就发会刷出一串撤销步。拖动、方向键、滚轮与步进按钮逐帧发 input,停手(松手,或 400ms 没再动)发一次 commit:宿主拿 input 实时改文档,按 commit 把一次调整并成一步撤销。v-model 随两者更新。外面传回的值只刷新显示、不回写;聚焦输入中也不覆盖正在打的字。
Esc 两段式:框里有没提交的字时先撤回并标 defaultPrevented,外面的弹层不跟着关;没有时照常冒泡。
多个值与空值
值为 undefined 就是空:可以清空(回车提交 undefined),空着时步进从 min(或 0)起。编辑器同时选中几个元素、这一项各不相同时,值给 undefined 并带上 mixed:显示为空、占位「多个值」(文案走 locale),不能拖动与步进,填了就一次改全部,清空回车会还原。
年龄不能是负数
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | undefined | undefined | 全名:输入框的读屏名;有前缀时也是前缀的悬停提示 |
icon | string | undefined | undefined | 框内前缀图标(优先于 `short`),编辑器档的 X / Y / W / H |
short | string | undefined | undefined | 框内前缀文字,一个字 |
placeholder | string | undefined | undefined | 缺省:`mixed` 时是「多个值」(locale 的 `numberField.mixed`) |
min | number | undefined | undefined | — |
max | number | undefined | undefined | — |
step | number | undefined | 1 | 方向键、滚轮、步进按钮一下改多少;拖动时是每像素改多少 |
greatly | number | undefined | 10 | 按住 Shift 的倍数(方向键与拖动) |
stepSnapping | boolean | undefined | false | 打字输入的值吸附到 `step` 的整数倍;编辑器里打多少是多少,默认不吸 |
formatOptions | Intl.NumberFormatOptions | undefined | undefined | `Intl.NumberFormat` 选项:百分比(`style: 'percent'`,值是 0–1)、单位、小数位 |
locale | string | undefined | undefined | 数字格式的地区,缺省跟 Reka 的 ConfigProvider(没有就是 en) |
controls | boolean | undefined | true | 显示 −/+ 步进按钮 |
drag | false | "prefix" | "field" | undefined | "prefix" | 拖动改值的区域:`prefix` 只拖前缀(点框里照常打字)/ `field` 整格(按下先不聚焦,没拖动松手才进入输入)/ 不拖 |
curve | NumberFieldCurve | undefined | undefined | 自定义拖动映射:起点(模型值)+ 位移(像素)→ 新值,如缩放的指数手感;给了就不用 `step` |
mixed | boolean | undefined | false | 多选时各不相同(编辑器同时选中几个元素、这一项各不一样):值给 undefined 并带上它,显示为空、占位「多个值」, 不能拖动与步进(没有「一个值」可起步),清空回车还原,填了就是一个值。同 Figma 的 mixed、复选框的 indeterminate, 是显式状态;不带它时 undefined 就是普通的空:可以清空(回车提交 undefined),空着时步进从 `min`(或 0)起 |
disabled | boolean | undefined | false | — |
readonly | boolean | undefined | false | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
variant | FieldVariant | undefined | undefined | — |
modelValue | number | undefined | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: number | undefined] | — |
input | [value: number] | — |
commit | [value: number | undefined] | — |
Slots
| 插槽 | 说明 |
|---|---|
prefix | — |
decrement-icon | — |
increment-icon | — |