@xwink/ui

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 设一次。

X / Y / W / H、旋转、不透明度、缩放
X
Y
W
H
W

按住前缀(缩放框是整格)左右拖动改值,Shift 十倍;input 0 次 / commit 0 次

提交节奏

打字只在回车或失焦时发 commit——每敲一位就发会刷出一串撤销步。拖动、方向键、滚轮与步进按钮逐帧发 input,停手(松手,或 400ms 没再动)发一次 commit:宿主拿 input 实时改文档,按 commit 把一次调整并成一步撤销。v-model 随两者更新。外面传回的值只刷新显示、不回写;聚焦输入中也不覆盖正在打的字。

Esc 两段式:框里有没提交的字时先撤回并标 defaultPrevented,外面的弹层不跟着关;没有时照常冒泡。

多个值与空值

值为 undefined 就是空:可以清空(回车提交 undefined),空着时步进从 min(或 0)起。编辑器同时选中几个元素、这一项各不相同时,值给 undefined 并带上 mixed:显示为空、占位「多个值」(文案走 locale),不能拖动与步进,填了就一次改全部,清空回车会还原。

多个值 / 错误 / 禁用 / 只读
W

年龄不能是负数

API

Props

名称类型默认值说明
labelstring | undefinedundefined全名:输入框的读屏名;有前缀时也是前缀的悬停提示
iconstring | undefinedundefined框内前缀图标(优先于 `short`),编辑器档的 X / Y / W / H
shortstring | undefinedundefined框内前缀文字,一个字
placeholderstring | undefinedundefined缺省:`mixed` 时是「多个值」(locale 的 `numberField.mixed`)
minnumber | undefinedundefined—
maxnumber | undefinedundefined—
stepnumber | undefined1方向键、滚轮、步进按钮一下改多少;拖动时是每像素改多少
greatlynumber | undefined10按住 Shift 的倍数(方向键与拖动)
stepSnappingboolean | undefinedfalse打字输入的值吸附到 `step` 的整数倍;编辑器里打多少是多少,默认不吸
formatOptionsIntl.NumberFormatOptions | undefinedundefined`Intl.NumberFormat` 选项:百分比(`style: 'percent'`,值是 0–1)、单位、小数位
localestring | undefinedundefined数字格式的地区,缺省跟 Reka 的 ConfigProvider(没有就是 en)
controlsboolean | undefinedtrue显示 −/+ 步进按钮
dragfalse | "prefix" | "field" | undefined"prefix"拖动改值的区域:`prefix` 只拖前缀(点框里照常打字)/ `field` 整格(按下先不聚焦,没拖动松手才进入输入)/ 不拖
curveNumberFieldCurve | undefinedundefined自定义拖动映射:起点(模型值)+ 位移(像素)→ 新值,如缩放的指数手感;给了就不用 `step`
mixedboolean | undefinedfalse多选时各不相同(编辑器同时选中几个元素、这一项各不一样):值给 undefined 并带上它,显示为空、占位「多个值」, 不能拖动与步进(没有「一个值」可起步),清空回车还原,填了就是一个值。同 Figma 的 mixed、复选框的 indeterminate, 是显式状态;不带它时 undefined 就是普通的空:可以清空(回车提交 undefined),空着时步进从 `min`(或 0)起
disabledboolean | undefinedfalse—
readonlyboolean | undefinedfalse—
size"mini" | "small" | "medium" | "large" | "super" | undefinedundefined尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size
variantFieldVariant | undefinedundefined—
modelValuenumber | undefined——

Emits

事件载荷说明
update:modelValue[value: number | undefined]—
input[value: number]—
commit[value: number | undefined]—

Slots

插槽说明
prefix—
decrement-icon—
increment-icon—