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 失去焦点 | — |