组件

OneInput

OneInput 封装原生 input，同时保留明确的值控制边界。

查看代码收起代码

import { OneInput, type OneInputValueEvent } from '@geektech/one';

const input = new OneInput({ placeholder: '请输入名称', ariaLabel: '名称' });
input.on('input', (payload) => {
  const event = payload as OneInputValueEvent;
  console.log(event.value);
});

受控与非受控

传入 value 使用受控模式；监听 input 后用 setProps 接受新值。只传 defaultValue 时使用非受控模式，组件会维护内部值。

import { OneInput, type OneInputValueEvent } from '@geektech/one';

const controlled = new OneInput({ value: 'one', ariaLabel: '项目名称' });
controlled.on('input', (payload) => {
  const event = payload as OneInputValueEvent;
  controlled.setProps({ value: event.value });
});

const uncontrolled = new OneInput({ defaultValue: 'draft', ariaLabel: '草稿名称' });
uncontrolled.on('change', (payload) => {
  const event = payload as OneInputValueEvent;
  console.log(event.value, event.originalEvent);
});

原生状态

type、name、placeholder、disabled、readonly 和 required 直接映射到原生 input；invalid 同时添加状态类并设置 aria-invalid。

API

OneInput 属性与事件
名称	签名	说明
`value`	`value?: string`	受控值；存在时输入后恢复最新 prop。
`defaultValue`	`defaultValue?: string`	非受控初始值。
`type`	`type?: string`	原生 input 类型。
`name`	`name?: string`	原生字段名。
`placeholder`	`placeholder?: string`	输入提示。
`size`	`size?: OneComponentSize`	组件尺寸：'sm' \| 'md' \| 'lg'，默认 md。
`disabled`	`disabled?: boolean`	原生禁用状态。
`readonly`	`readonly?: boolean`	原生只读状态。
`required`	`required?: boolean`	原生必填状态。
`invalid`	`invalid?: boolean`	无效样式与 aria-invalid。
`ariaLabel`	`ariaLabel?: string`	映射到 aria-label。
`input`	`(payload: OneInputValueEvent) => void`	每次原生 input 事件发出。
`change`	`(payload: OneInputValueEvent) => void`	每次原生 change 事件发出。