Input 输入框
通过鼠标或键盘输入字符
WARNING
Input 为受控组件,它 总会显示 Vue 绑定值。
在正常情况下,input
的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用 v-model
)。 否则,输入框的值将不会改变。
不支持 v-model
修饰符。
基础用法
禁用状态
一键清空
格式化
在 formatter
的情况下显示值,我们通常同时使用 parser
密码框
带图标的输入框
带有图标标记输入类型
文本域
用于输入多行文本信息可缩放的输入框。 添加 type="textarea"
属性来将 input
元素转换为原生的 textarea
元素。
自适应文本域
设置文字输入类型的 autosize
属性使得根据内容自动调整的高度。 你可以给 autosize
提供一个包含有最大和最小高度的对象,让输入框自动调整。
尺寸
输入长度限制
API
Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 类型 | string 'text' | 'textarea' | 'password' | 'button' | 'checkbox' | 'file' | 'number' | 'radio' | ... 等原生 input 类型 | text |
model-value / v-model | 绑定值 | string / number | — |
maxlength | 同原生 maxlength 属性 | string / number | — |
minlength | 原生属性,最小输入长度 | string / number | — |
show-word-limit | 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 | boolean | false |
placeholder | 输入框占位文本 | string | — |
clearable | 是否显示清除按钮,只有当 type 不是 textarea时生效 | boolean | false |
formatter | 指定输入值的格式。(只有当 type 是"text"时才能工作) | Function (value: string | number) => string | — |
disabled | 是否禁用 | boolean | false |
size | 输入框尺寸,只在 type 不为 'textarea' 时有效 | enum 'large' | 'default' | 'small' | — |
autosize | textarea 高度是否自适应,仅 type 为 'textarea' 时生效。 可以接受一个对象,比如: { minRows: 2, maxRows: 6 } | boolean / object { minRows?: number, maxRows?: number } | false |
autocomplete | 原生 autocomplete 属性 | string | off |
name | 等价于原生 input name 属性 | string | — |
readonly | 原生 readonly 属性,是否只读 | boolean | false |
max | 原生 max 属性,设置最大值 | — | — |
min | 原生属性,设置最小值 | — | — |
Events
事件名 | 说明 | 类型 |
---|---|---|
blur | 当选择器的输入框失去焦点时触发 | Function (event: FocusEvent) => void |
focus | 当选择器的输入框获得焦点时触发 | Function (event: FocusEvent) => void |
clear | 在点击由 clearable 属性生成的清空按钮时触发 | Function () => void |