数字输入
Number Input / Spinbutton
让数值以可验证的格式输入，并可按步长增减。
范围 1–20，可键入或使用原生步进器
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'number-input'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
数量、阈值和需要精确录入的参数。
什么时候不用
电话号码、邮编等标识符应作为文本，不当作可计算数值。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "副本数量" |
name | "sample-copies" |
value | 3 |
min | 1 |
max | 20 |
step | 1 |
disabled | false |
help | "范围 1–20，可键入或使用原生步进器" |
id | — |
attributes | — |
placeholder | — |
required | — |
readOnly | — |
minLength | — |
maxLength | — |
autocomplete | — |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 最小值、最大值与步长表达清楚。
- 允许直接键入，格式化不要破坏编辑光标。
和相似组件的区别
Number Input 强调精确值；Slider 强调范围位置。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验