Input 输入框

用于文本录入、密码输入和轻量搜索场景，支持尺寸切换、清空按钮、密码显隐、前后置图标和防抖搜索事件，样式完全复用现有主题 CSS 变量。

基础用法

通过 v-model 受控输入值，默认类型为 text。

尺寸与类型

组件提供 large、default、small 三种尺寸，并支持 text、password、number 三种原生输入类型。

禁用与只读

disabled 会完全禁用交互，readonly 保留聚焦和选中文本能力，但不允许修改内容。

一键清空

开启 clearable 后，输入框有值且处于可交互状态时会显示清空按钮。

密码显隐

当 type="password" 且开启 show-password 时，组件会在后置区域显示密码显隐按钮。

前置 / 后置图标

通过 prefix 和 suffix 插槽复用 MyIcon 组件，可以快速构建搜索、筛选、状态提示等输入场景。

防抖搜索

监听 search 事件即可获得防抖后的输入值，debounce 用于控制触发间隔。

结合 Button 使用

输入框和按钮组合后，可以快速构建常见的搜索栏布局。

接口说明

属性

名称	类型	默认值	说明
modelValue	string	''	受控输入值，推荐通过 v-model 使用。
size	'large' | 'default' | 'small'	'default'	输入框尺寸。
type	'text' | 'password' | 'number'	'text'	原生输入类型，number 仍保持字符串值语义。
disabled	boolean	false	是否禁用输入框及后置操作按钮。
readonly	boolean	false	是否只读；只读时不会显示清空按钮。
placeholder	string	''	原生占位文本。
clearable	boolean	false	是否在有值时显示一键清空按钮。
showPassword	boolean	false	是否在 type='password' 时显示密码显隐按钮。
debounce	number	300	search 事件的防抖时间，单位毫秒；小于等于 0 时立即触发。

事件

名称	类型	默认值	说明
update:modelValue	(value: string) => void	-	输入值变化时触发，用于驱动 v-model。
input	(value: string) => void	-	用户输入时触发，包含最新字符串值。
change	(value: string) => void	-	原生 change 事件触发时回传最新值。
focus	(event: FocusEvent) => void	-	获取焦点时触发。
blur	(event: FocusEvent) => void	-	失去焦点时触发。
clear	(event: MouseEvent) => void	-	点击清空按钮时触发。
search	(value: string) => void	-	输入变更后按 debounce 节流触发。

插槽

名称	类型	默认值	说明
prefix	() => VNode[]	-	前置区域内容，通常用于放置 MyIcon。
suffix	() => VNode[]	-	后置自定义内容，会渲染在内建 clear / password 操作之前。

暴露方法

名称	类型	默认值	说明
focus	() => void	-	使原生输入框获得焦点。
blur	() => void	-	使原生输入框失去焦点。
select	() => void	-	选中当前输入值。
ref	HTMLInputElement | undefined	-	暴露的原生 input 元素引用。