数据录入与表单

NnInput 输入框

支持清除和受控值的单行输入。

示例

API

Props

名称	类型	默认值	说明
value	string | number	''	输入值；null/undefined 会显示为空字符串。配合 v-model:value。
type	string	'text'	原生 <input type>。
placeholder	string	''	占位文字。
allowClear	boolean	false	有值且非只读、非禁用时显示清除按钮。
status	string	''	error、warning 使用对应状态样式。
disabled	boolean	false	禁用输入。
readonly	boolean	false	原生只读状态。
maxlength	number | string	—	原生 maxlength。
minlength	number | string	—	原生 minlength。
size	string	'middle'	small、large 使用对应样式，其他值为默认尺寸。
bordered	boolean	true	是否显示边框。

未声明的属性会转发给内部原生 <input>；class 和 style 应用到外层 wrapper。

Events

事件	参数	说明
update:value	(value: string)	输入或清除时触发。
input	(event: InputEvent | ClearValueEvent)	每次输入触发；清除按钮使用包含 target、currentTarget、nativeEvent 的合成对象。
change	(event: InputEvent | ClearValueEvent)	当前实现与 input 同时触发，不等待失焦。
pressEnter	(event: KeyboardEvent)	keydown 的键为 Enter 时触发。
focus	(event: FocusEvent)	原生 focus。
blur	(event: FocusEvent)	原生 blur。
keydown	(event: KeyboardEvent)	原生 keydown。
keyup	(event: KeyboardEvent)	原生 keyup。
clear	(event: MouseEvent)	点击清除按钮后触发。

Slots

名称	作用域参数	说明
prefix	—	输入框前缀。
suffix	—	输入框后缀。

Expose

名称	签名或值	说明
input	HTMLInputElement 引用	内部原生输入元素。
focus	(options?: FocusOptions) => void	聚焦输入。
blur	() => void	移除焦点。
select	() => void	选择全部文本。