输入框,通过鼠标或键盘输入字符。
# 基础示例
默认会过滤掉前后空格(后面的空格会在失去焦点时过滤掉),但中间空格可以保留。可以设置 :trim="false"
关闭该行为。
# 禁用状态
通过设置 disabled
属性禁用。
# 可清空
通过设置 clearable
属性显示清空图标。
# 复合型输入框
通过设置 prefix
和 suffix
属性,可设置前置或后置元素,一般为标签或按钮。
# 密码
使用 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 |