数据录入与表单

NnInputSearch 搜索框

带搜索动作的输入框。

示例

API

Props

名称	类型	默认值	说明
`value`	`string \| number`	`''`	搜索值，配合 `v-model:value`。
`placeholder`	`string`	`''`	占位文字。
`allowClear`	`boolean`	`false`	显示清除按钮。
`status`	`string`	`''`	传给内部 `NnInput`。
`disabled`	`boolean`	`false`	禁用输入和搜索按钮。
`readonly`	`boolean`	`false`	只读输入。
`loading`	`boolean`	`false`	搜索按钮显示加载图标并禁用点击。
`enterButton`	`boolean \| string`	`false`	真值启用主要按钮样式；字符串同时作为按钮文字，否则显示搜索图标。
`size`	`string`	`'middle'`	传给内部 `NnInput`。
`bordered`	`boolean`	`true`	是否显示边框。

未声明的属性会继续通过 NnInput 转发给原生输入元素。

Events

事件	参数	说明
`update:value`	`(value: string)`	内部输入更新。
`input`	`(event)`	转发 `NnInput.input`。
`change`	`(event)`	转发 `NnInput.change`。
`pressEnter`	`(event: KeyboardEvent)`	按 Enter 时先触发该事件，随后触发 `search`。
`focus`	`(event: FocusEvent)`	转发 focus。
`blur`	`(event: FocusEvent)`	转发 blur。
`clear`	`(event: MouseEvent)`	转发清除事件。
`search`	`(value: string \| number, event: MouseEvent \| KeyboardEvent)`	点击搜索按钮或按 Enter 时触发；空的 `null`/`undefined` 值规范化为 `''`。

Expose

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

搜索组件占用内部 suffix 区域作为搜索按钮，没有公开 prefix/suffix 插槽。