Input 输入框
Input(输入框)是一个信息输入的控件,用户可输入或复制粘贴文本、数字等内容
默认
类型
outlined (默认)
lined
filled
禁用
outlined
lined
filled
多行文本框
0
可清除
密码框
前后置图标
前后置内容
大小
small
normal (默认)
large
Input Props
| 参数 | 介绍 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | String, Number | — | — |
| type | 原生 type 类型 | String | — | text |
| size | 大小 | String | small, large | — |
| style-type | 样式类型 | String | outlined, lined, filled | outlined |
| disabled | 是否禁用 | Boolean | — | false |
| readonly | 是否只读 | Boolean | — | false |
| clearable | 是否可清除 | Boolean | — | false |
| words-count | 是否统计字数,type 为 textarea 时有效 | Boolean | — | false |
| words-count-function | 自定义字数统计函数,参数为当前输入内容,返回字数 | Function | — | — |
| placeholder | 占位符 | String | — | — |
| autocomplete | 原生 autocomplete | String | — | off |
| name | 原生 name | String | — | — |
| autofocus | 原生 autofocus | Boolean | — | false |
| maxlength | 原生属性,最大输入长度 | Number | — | — |
| minlength | 原生属性,最小输入长度 | Number | — | — |
| max | 原生属性,最大值 | — | — | — |
| min | 原生属性,最小值 | — | — | — |
| rows | textarea rows | Number | — | 5 |
| spellcheck | 原生 spellcheck | Boolean | — | false |
| prepend-icon | 前置图标 | String | — | — |
| append-icon | 后置图标 | String | — | — |
Input Events
| 事件 | 介绍 | 参数 |
|---|---|---|
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| input | 在 Input 值改变时触发 | (value: string / number) |
| change | 在输入框失去焦点或用户按下回车时触发 | (value: string / number) |
| enter | 按下回车键时触发 | (event: Event) |
| keyup | 原生的 keyup 事件 | (event: Event) |
| keydown | 原生的 keydown 事件 | (event: Event) |
| clear | 点击清除按钮时触发 | — |
Input Slots
| 名称 | 介绍 | 类型 | 参数 |
|---|---|---|---|
| default | 默认 | Slot | — |
| prepend | 前置内容 | Slot | — |
| append | 后置内容 | Slot | — |
| words-count | 字数统计 | Slot |
Input Methods
| 事件 | 介绍 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | — |
| blur | 使 input 失去焦点 | — |