输入框,通过鼠标或键盘输入字符。

# 基础示例

默认会过滤掉前后空格(后面的空格会在失去焦点时过滤掉),但中间空格可以保留。可以设置 :trim="false" 关闭该行为。

# 禁用状态

通过设置 disabled 属性禁用。

# 可清空

通过设置 clearable 属性显示清空图标。

# 复合型输入框

通过设置 prefixsuffix 属性,可设置前置或后置元素,一般为标签或按钮。

# 密码

使用 type=password 即可作为密码输入框使用。但要注意一个问题,在 Chrome 等浏览器内,密码输入框会默认被自动填充(如果你选择让浏览器记住过密码的话)。而且对于 Chrome 来说,一旦给一个密码输入框自动填充后,就会将它前面(HTML 上方)的一个输入框视作用户名或邮箱输入框,并同时也自动填充它。这个特性在登录等位置很有用,但是在修改密码、重置密码等环节就可能会带来一些问题。

所以要搭配 autocomplete 属性来使用。在登录界面,无需指定该属性,如下:

而在修改密码、重置密码等位置,设定 autocomplete="new-password",确保不会自动填充。

# 字符计数

搭配 validation maxLength 则可以基于字符计数,并显示计数器。超过指定字符数后就无法继续输入。

还可以基于中文字符计数,一个中文字符占 1 位,一个英文字符占 0.5 位。通过输入法输入后会自动截断。

# 更多示例

配合 EFormItem 组件使用,做表单验证。

# EInput

# Props

Name Description Type Required Default
value v-model和value都可以采用 String / Number false -
type 支持 text/password String false -
placeholder 输入框占位文本 String false -
disabled 禁用 Boolean false -
clearable 是否可清空 Boolean false -
prefix 输入框头部 String false -
suffix 输入框尾部 String false -
autofocus 原生属性,自动获取焦点 Boolean false -
autocomplete 原生属性,自动补全,可选值 on, off String false -
readonly 原生属性,是否只读 Boolean false -
counter 是否显示字符计数器(如果 validation 中有 maxLength 或 maxChineseLength 的话) Boolean false -
trim 是否过滤掉前后空格 Boolean false true

# Events

Event Name Description Parameters
focus - -
blur - -
click - -
input - -

# Slots

Name Description Default Slot Content
prefix - -
suffix - -
default - -

# MixIns

MixIn
EValidationMixin