Input 输入框
通过鼠标或键盘输入字符，可以设置输入框的类型、大小和状态。
何时使用
- 需要用户输入文本内容时。
- 需要收集用户的简短信息时。
- 需要搜索、过滤或表单输入时。
基本使用
不同尺寸
禁用状态
只读状态
清空功能
密码输入
前置/后置内容
Input参数
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| type | InputType | text | 输入框类型 |
| size | InputSize | default | 输入框尺寸 |
| placeholder | string | -- | 占位符 |
| disabled | boolean | false | 是否为禁用状态 |
| readonly | boolean | false | 是否为只读状态 |
| clearable | boolean | false | 是否显示清空图标 |
| show-password | boolean | false | 密码输入时是否可切换可见性 |
| prepend | string | -- | 前置内容文本 |
| append | string | -- | 后置内容文本 |
| modelValue | string | -- | 绑定值 |
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 | -- | 点击清空图标时触发 |
Input插槽
| 插槽名 | 说明 |
|---|---|
| prepend | 前置内容 |
| append | 后置内容 |
| prefix | 前缀图标 |
| suffix | 后缀图标 |