Input 输入框 通过鼠标或键盘输入字符
基础用法 TSJSvue
隐藏源代码禁用状态 通过 disabled 属性指定是否禁用 input 组件
TSJSvue
v-model="input" style="width: 240px" disabled placeholder="Please input" /> 隐藏源代码一键清空 使用clearable属性即可得到一个可一键清空的输入框 在版本 2.13.4 之后，Input 的 textarea 类型也支持 clearable 功能。 TSJSvue v-model="input" style="width: 240px" placeholder="Please input" clearable /> v-model="textareaInput" style="width: 240px" placeholder="Please input" type="textarea" clearable />
隐藏源代码自定义清除图标2.11.0 你可以通过clear-icon属性自定义清除图标
TSJSvue
v-model="input" clearable :clear-icon="CloseBold" placeholder="Custom clear icon" /> v-model="textareaInput" clearable :clear-icon="CloseBold" placeholder="Custom clear icon" type="textarea" />
隐藏源代码格式化 在 formatter的情况下显示值，我们通常同时使用 parser
TSJSvue
v-model="input" style="width: 240px" placeholder="Please input" :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="(value) => value.replace(/\$\s?|(,*)/g, '')" /> 隐藏源代码密码框 使用 show-password 属性即可得到一个可切换显示隐藏的密码框 自 2.13.6 起，支持使用 password-icon 插槽覆盖默认图标。 TSJSvue v-model="input" style="width: 240px" type="password" placeholder="Please input password" show-password /> v-model="input" style="width: 240px" type="password" placeholder="Please input password" show-password >
隐藏源代码带图标的输入框 带有图标标记输入类型
要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性。 另外， prefix 和 suffix 命名的插槽也能正常工作。
Using attributesUsing slotsTSJSvue
隐藏源代码文本域 用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。
文本域高度可通过 rows 属性控制
TSJSvue
v-model="textarea" style="width: 240px" :rows="2" type="textarea" placeholder="Please input" /> 隐藏源代码自适应文本域 设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象，让输入框自动调整。 TSJSvue v-model="textarea1" style="width: 240px" autosize type="textarea" placeholder="Please input" /> v-model="textarea2" style="width: 240px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="Please input" /> 隐藏源代码复合型输入框 可以在输入框中前置或后置一个元素，通常是标签或按钮。 可通过 slot 来指定在 Input 中分发的前置或者后置的内容。 Http://.comSelectSelectTSJSvue v-model="input1" style="max-width: 600px" placeholder="Please input" > Http:// v-model="input2" style="max-width: 600px" placeholder="Please input" > .com
v-model="input3" style="max-width: 600px" placeholder="Please input" class="input-with-select" >
v-model="input3" style="max-width: 600px" placeholder="Please input" class="input-with-select" >
隐藏源代码尺寸 使用 size 属性改变输入框大小。 除了默认大小外，还有另外两个选项： large, small。
TSJSvue
v-model="input1" style="width: 240px" size="large" placeholder="Please Input" /> v-model="input2" style="width: 240px" placeholder="Please Input" /> v-model="input3" style="width: 240px" size="small" placeholder="Please Input" />
v-model="input1" style="width: 240px" size="large" placeholder="Please Input" :suffix-icon="Search" /> v-model="input2" style="width: 240px" placeholder="Please Input" :suffix-icon="Search" /> v-model="input3" style="width: 240px" size="small" placeholder="Please Input" :suffix-icon="Search" />
v-model="input1" style="width: 240px" size="large" placeholder="Please Input" :prefix-icon="Search" /> v-model="input2" style="width: 240px" placeholder="Please Input" :prefix-icon="Search" /> v-model="input3" style="width: 240px" size="small" placeholder="Please Input" :prefix-icon="Search" />
隐藏源代码输入长度限制 使用 maxlength 和 minlength 属性, 来控制输入内容的最大字数和最小字数。 "字符数"使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limit 到 true 来显示剩余字数。 从 2.11.5 版本开始，你可以将 word-limit-position 设置为 outside，以在输入框外显示字数统计。
0 / 100 / 100 / 300 / 30TSJSvue
v-model="text" style="width: 240px" maxlength="10" placeholder="Please input" show-word-limit type="text" /> v-model="text" class="ml-4" style="width: 240px" maxlength="10" placeholder="Please input" show-word-limit word-limit-position="outside" type="text" /> v-model="textarea" maxlength="30" style="width: 240px" placeholder="Please input" show-word-limit type="textarea" /> v-model="textarea" class="ml-4" maxlength="30" style="width: 240px" placeholder="Please input" show-word-limit word-limit-position="outside" type="textarea" /> 隐藏源代码计数图形2.13.7 设置 count-graphemes 以计算文本长度。 如果设置了该属性，则不会使用原生的 maxlength 和 minlength。 2 / 102 / 20TSJSvue v-model="text" maxlength="10" placeholder="Please input" show-word-limit :count-graphemes="calc" type="text" /> v-model="textarea" maxlength="20" placeholder="Please input" show-word-limit :count-graphemes="calc" type="textarea" /> 隐藏源代码TIP 浏览器支持 & 回退策略 当使用 count-graphemes prop时，组件使用以下方法： 主要: 使用 Intl.Segmenter API (Chrome 87+, Firefox 125+, Safari 14.1+) 进行适当的图形集群处理。 它能够正确处理复杂的表情符号、组合标记和0宽度连接符序列。 回退: 旧版浏览器会回退到 Array.from() 进行基于码点的迭代。 请注意，这可能会拆分多码点字形序列（例如，带有肤色修饰符的表情符号）。 在实现自己的 count-graphemes 函数时，如果需要对复杂的 unicode 字符提供强大的支持，请考虑使用 Intl.Segmenter。 API Attributes 属性名说明类型默认值type输入类型，更多信息请参见 MDNstringtextmodel-value / v-model绑定值string / number—model-modifiers 2.11.5v-model 修饰符，参考 Vue 修饰符object—maxlength同原生 maxlength 属性string / number—minlength原生属性，最小输入长度string / number—show-word-limit是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效booleanfalseword-limit-position 2.11.5字数统计的位置，仅当 show-word-limit 为 true 时生效。enum"inside"placeholder输入框占位文本string—clearable是否显示清除按钮，只有当 type 不是 textarea时生效booleanfalseclear-icon 2.11.0自定义清除图标string / objectCircleCloseformatter指定输入值的格式。(只有当 type 是"text"时才能工作)Function—parser指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)Function—show-password是否显示切换密码图标booleanfalsedisabled是否禁用booleanfalsesize输入框尺寸，只在 type 不为 'textarea' 时有效enum—prefix-icon自定义前缀图标string / Component—suffix-icon自定义后缀图标string / Component—rows输入框行数，仅 type 为 'textarea' 时有效number2autosizetextarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }boolean / objectfalseautocomplete原生 autocomplete 属性stringoffname等价于原生 input name 属性string—readonly原生 readonly 属性，是否只读booleanfalsemax原生 max 属性，设置最大值——min原生属性，设置最小值——step原生属性，设置输入字段的合法数字间隔:::—resize控制是否能被用户缩放enum—autofocus原生属性，自动获取焦点booleanfalseform原生属性string—aria-label a11y 2.7.2等价于原生 input aria-label 属性string—tabindex输入框的 tabindexstring / number—validate-event输入时是否触发表单的校验booleantrueinput-styleinput 元素或 textarea 元素的 stylestring / object{}label a11y deprecated等价于原生 input aria-label 属性string—inputmode 2.10.3等价于原生 input inputmode 属性string—count-graphemes 2.13.7自定义函数用于计算字形；设置后，将绕过原生的 maxlength/minlength 约束。 组件使用 Intl.Segmenter（Chrome 87+、Firefox 125+、Safari 14.1+）进行正确的字素聚类；旧版浏览器回退到使用 Array.from() 进行码点迭代。Function—Events 事件名说明类型blur当选择器的输入框失去焦点时触发Functionfocus当选择器的输入框获得焦点时触发Functionchange仅当 modelValue 改变时，当输入框失去焦点或用户按Enter时触发Functioninput在 Input 值改变时触发Functionclear在点击由 clearable 属性生成的清空按钮时触发Functionkeydown按下键时触发Functionmouseleave当鼠标离开输入元素时触发Functionmouseenter当鼠标进入输入元素时触发Functioncompositionstart输入法输入开始时触发Functioncompositionupdate输入法输入改变时触发Functioncompositionend输入法输入完成时触发FunctionSlots 插槽名说明prefix输入框头部内容，只对非 type="textarea" 有效suffix输入框尾部内容，只对非 type="textarea" 有效prepend输入框前置内容，只对非 type="textarea" 有效append输入框后置内容，只对非 type="textarea" 有效password-icon 2.13.6作为输入密码图标的内容，仅在 show-password 为 true 时生效。 作用域变量为 { visible: boolean }Exposes 名称说明类型blur使 input 失去焦点Functionclear清除 input 值Functionfocus使 input 获取焦点FunctioninputInput HTML 元素objectrefHTML元素 input 或 textareaobjectresizeTextarea改变 textarea 大小Functionselect选中 input 中的文字FunctiontextareaHTML textarea 元素objecttextareaStyletextarea 的样式objectisComposing 2.8.0是否是输入 composing 状态objectpasswordVisible 2.13.7密码是否可见object常见问题 ElInput 组件的宽度为什么在设置了 clearable 时会发生变化 典型问题： #7287 PS: 由于ElInput 组件没有默认宽度，当显示 clearable 图标时, 组件的宽度将被撑开，可以通过设置固定宽度属性来解决。 vue 贡献者