vue element plus Input 输入框

简介: vue element plus Input 输入框

通过鼠标或键盘输入字符

WARNING

Input 为受控组件,它 总会显示 Vue 绑定值

在正常情况下,input 的输入事件应该被正常响应。 它的处理程序应该更新组件的绑定值 (或使用 v-model)。 否则,输入框的值将不会改变。

不支持 v-model 修饰符。

基础用法#

禁用状态#

通过 disabled 属性指定是否禁用 input 组件

一键清空#

使用clearable属性即可得到一个可一键清空的输入框

格式化#

formatter的情况下显示值,我们通常同时使用 parser

密码框#

使用 show-password 属性即可得到一个可切换显示隐藏的密码框

带图标的输入框#

带有图标标记输入类型

要在输入框中添加图标,你可以简单地使用 prefix-iconsuffix-icon 属性。 另外, prefixsuffix 命名的插槽也能正常工作。

Using attributes

Using slots

文本域#

用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。

文本域高度可通过 rows 属性控制

自适应文本域#

设置文字输入类型的 autosize 属性使得根据内容自动调整的高度。 你可以给 autosize 提供一个包含有最大和最小高度的对象,让输入框自动调整。

复合型输入框#

可以在输入框中前置或后置一个元素,通常是标签或按钮。

可通过 slot 来指定在 Input 中分发的前置或者后置的内容。

Http://

.com

Select

Select

尺寸#

使用 size 属性改变输入框大小。 除了默认大小外,还有另外两个选项: large, small

输入长度限制#

使用 maxlengthminlength 属性, 来控制输入内容的最大字数和最小字数。 "字符数"使用JavaScript字符串长度来衡量。 为文本或文本输入类型设置 maxlength prop可以限制输入值的长度。 允许你通过设置 show-word-limittrue 来显示剩余字数。

0 / 10

0 / 30

API#

Attributes#

属性名 说明 类型 默认值
type 类型 string原生 input 类型 text
model-value / v-model 绑定值 string / number
maxlength 同原生 maxlength 属性 string / number
minlength 原生属性,最小输入长度 string / number
show-word-limit 是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效 boolean boolean
placeholder 输入框占位文本 string
clearable 是否显示清除按钮,只有当 type 不是 textarea时生效 boolean false
formatter 指定输入值的格式。(只有当 type 是"text"时才能工作) Function
parser 指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用) Function
show-password 是否显示切换密码图标 boolean false
disabled 是否禁用 boolean false
size 输入框尺寸,只在 type 不为 'textarea' 时有效 enum
prefix-icon 自定义前缀图标 string / Component
suffix-icon 自定义后缀图标 string / Component
rows 输入框行数,仅 type 为 'textarea' 时有效 number number
autosize textarea 高度是否自适应,仅 type 为 'textarea' 时生效。 可以接受一个对象,比如: { minRows: 2, maxRows: 6 } boolean / object false
autocomplete 原生 autocomplete 属性 string off
name 等价于原生 input name 属性 string
readonly 原生 readonly 属性,是否只读 boolean false
max 原生 max 属性,设置最大值
min 原生属性,设置最小值
step 原生属性,设置输入字段的合法数字间隔
resize 控制是否能被用户缩放 enum
autofocus 原生属性,自动获取焦点 boolean false
form 原生属性 string
label a11y 等价于原生 input aria-label 属性 string
tabindex 输入框的 tabindex string / number
validate-event 输入时是否触发表单的校验 boolean true
input-style input 元素或 textarea 元素的 style string / object {}

Events#

事件名 说明 类型
blur 当选择器的输入框失去焦点时触发 Function
focus 当选择器的输入框获得焦点时触发 Function
change 仅当 modelValue 改变时,当输入框失去焦点或用户按Enter时触发 Function
input 在 Input 值改变时触发 Function
clear 在点击由 clearable 属性生成的清空按钮时触发 Function

Slots#

插槽名 说明
prefix 输入框头部内容,只对非 type="textarea" 有效
suffix 输入框尾部内容,只对非 type="textarea" 有效
prepend 输入框前置内容,只对非 type="textarea" 有效
append 输入框后置内容,只对非 type="textarea" 有效

Exposes#

名称 说明 类型
blur 使 input 失去焦点 Function
clear 清除 input 值 Function
focus 使 input 获取焦点 Function
input Input HTML 元素 object
ref HTML元素 input 或 textarea object
resizeTextarea 改变 textarea 大小 Function
select 选中 input 中的文字 Function
textarea HTML textarea 元素 object
textareaStyle textarea 的样式 object

常见问题#

ElInput 组件的宽度为什么在设置了clearable时会发生变化#

典型问题: #7287

PS: 由于ElInput 组件没有默认宽度,当显示 clearable 图标时, 组件的宽度将被撑开,可以通过设置固定宽度属性来解决。

<el-input v-model="input" clearable style="width: 200px" />

源代码#

组件文档

相关文章
|
6天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
21 0
|
1天前
|
JavaScript
vue知识点
vue知识点
13 4
|
2天前
|
JavaScript Java 关系型数据库
基于SprinBoot+vue的租房管理系统2
基于SprinBoot+vue的租房管理系统2
9 0
|
2天前
|
自然语言处理 JavaScript 数据可视化
5个值得推荐的Vue后台管理框架
几个优秀好看的 Vue 后台管理框架,每个框架都有自己的特点和优势,开发者可以根据项目需求选择适合的框架。
15 0
|
6天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
13 1
|
JavaScript 前端开发
vue开发:对Element上传功能的二次封装
最近公司老项目改用vue开发,前端框架采用element ui,这个框架风格还是很漂亮的,只是上传功能有一些问题,比如:limit=1限制上传数量后,后面的添加按钮没有隐藏,再用就是如果上传图片组,很多需求需要对图片组进行排序修改,基于这两个需求,对element的el-upload组件进行了二次封装。
2407 0
|
7天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
7天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
7天前
|
JavaScript C++
vue高亮显示组件--转载
vue高亮显示组件--转载
13 0
|
7天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码