Input 输入框
通过鼠标或键盘输入字符，可以设置输入框的类型、大小和状态。
何时使用
- 需要用户输入文本内容时。
- 需要收集用户的简短信息时。
- 需要搜索、过滤或表单输入时。
基本使用
不同尺寸
禁用状态
只读状态
清空功能
密码输入
前置/后置内容
Variants
录入组件统一 variant 形态。四档：outlined（默认）/ filled（无边框 + 填充背景）/ borderless（无边框无背景）/ underlined（仅底部边框）。
校验状态 status
status='error' | 'warning' 控制边框 / focus 阴影色。Form 联动会自动透传：放进 <c-form-item> 里且校验失败时，Input 自动加 --status-error 类，无需手写。显式 status 优先于 Form 注入。
Input参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| type | InputType | text | 输入框类型 |
| size | InputSize | default | 输入框尺寸 |
| placeholder | string | -- | 占位符 |
| disabled | boolean | false | 是否为禁用状态 |
| readonly | boolean | false | 是否为只读状态 |
| modelValue | string | -- | 绑定值（v-model） |
| defaultValue | string | -- | 非受控初值，仅首次挂载使用 |
| clearable | boolean | false | 是否显示清除按钮 |
| show-password | boolean | false | 密码输入时是否可切换可见性 |
| prepend | string | '' | 前置 addon 文本（也可用同名 prepend slot） |
| append | string | '' | 后置 addon 文本（也可用同名 append slot） |
| maxLength | number | -- | 最大长度（透传原生 maxlength） |
| showCount | boolean | false | |
| status | '' | 'error' | 'warning' |
Input类型定义
InputType
ts
export type InputType = 'text' | 'password'InputSize
ts
export type InputSize = 'large' | 'default' | 'small'Input事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| update:modelValue | value | 绑定值改变时触发（v-model 事件） |
| input | value | 输入框值改变时触发 |
| change | value | 输入框值改变并失去焦点时触发 |
| focus | event | 输入框获得焦点时触发 |
| blur | event | 输入框失去焦点时触发 |
| clear | -- | 点击清除图标时触发 |
| press-enter | KeyboardEvent | Enter 键按下时触发 |
Input插槽
| 插槽名 | 说明 |
|---|---|
| prepend | 前置 addon 内容 |
| append | 后置 addon 内容 |
| prefix | 输入框内左侧前缀 |
| suffix | 输入框内右侧后缀 |