Input 文本输入

优质

小牛编辑

129浏览

2023-12-01

使用指南

组件介绍

文本输入组件

引入方式

import { Input, InputGroup, SMSVerifier, Textarea } from 'feart';

components: {
  "fe-input": Input,
  "fe-input-group": InputGroup,
  "fe-sms-verifier": SMSVerifier,
  "fe-textarea": Textarea
},

代码演示

基本用法

<div>单项文本输入</div>
<fe-input label="单项" v-model="fieldValue" />
<div>多项输入</div>
<fe-input-group>
  <fe-input label="多项输入" v-model="fieldValue1" />
  <fe-input label="多项输入" v-model="fieldValue2" />
</fe-input-group>
<div>文本段落输入</div>
<fe-textarea v-model="fieldValue" />
<div>短信校验</div>
<fe-sms-verifier @send="send" v-model="fieldValue" />

API

Input API

参数	说明	类型	默认值	可选值
label	文本输入标题	`String`	-	-
name	文本输入字段名	`String`	-	-
value	文本输入内容	`String` `Number`	-	-
autocomplete	自动填充	`String`	`off`	-
autocapitalize	自动大写	`String`	`off`	-
autocorrect	自动更正	`String`	`off`	-
autofocus	自动获得焦点	`String`	-	-
disabled	禁用	`Boolean`	`false`	-
maxlength	最大字符数	`Number`	-	-
pattern	提示信息	`RegExp`	-	-
placeholder	提示信息	`String`	`暗提示`	-
readonly	只读	`Boolean`	`false`	-
showClean	是否显示清除按钮	`Boolean`	`true`	-
showMore	是否显示更多图标	`Boolean` `Function`	`false`	-
spellcheck	拼写检查	`String`	`false`	-
tip	右侧提示	`String`	-	-
type	输入类型	`String`	`text`	`email` `number` `search` `tel` `text` `textarea` `url`
-	-	-	-	-

Textarea API

参数	说明	类型	默认值	可选值
name	文本输入字段名	`String`	-	-
value	文本输入内容	`String` `Number`	-	-
autofocus	自动获得焦点	`String`	-	-
disabled	禁用	`Boolean`	`false`	-
maxlength	最大字符数	`Number`	`80`	-
minlength	最小字符数	`Number`	`10`	-
placeholder	提示信息	`String`	`请输入不少于${minlength}个字的描述`	-
readonly	只读	`Boolean`	`false`	-
-	-	-	-	-

SMSVerifier API

参数	说明	类型	默认值	可选值
label	文本输入标题	`String`	`验证码`	-
name	文本输入字段名	`String`	-	-
value	文本输入内容	`String` `Number`	-	-
autofocus	自动获得焦点	`String`	-	-
disabled	禁用	`Boolean`	`false`	-
interval	重新获取事件间隔，单位秒	`Number`	`60`	-
maxlength	最大字符数	`Number`	`6`	-
placeholder	提示信息	`String`	`请输入验证码`	-
showClean	是否显示清除按钮	`Boolean`	`true`	-
-	-	-	-	-

Events

Input Events

事件名	参数	说明	备注
blur	`event`	失焦时触发	-
click-more	-	点击有更多图标的输入组件时触发	-
enter	`event`	按下回车键时触发	-
focus	`event`	聚焦时触发	-
input	`value`	内容变化时触发	-
-	-	-	-

Textarea Events

事件名	参数	说明	备注
blur	`event`	失焦时触发	-
focus	`event`	聚焦时触发	-
input	`value`	内容变化时触发	-
-	-	-	-

SMSVerifier Events

事件名	参数	说明	备注
blur	`event`	失焦时触发	-
enter	`event`	按下回车键时触发	-
focus	`event`	聚焦时触发	-
send	-	点击发送按钮时触发	-
input	`value`	内容变化时触发	-
-	-	-	-

Methods

参数	参数	说明	备注
blur	-	取消焦点	-
focus	-	获取焦点	-
-	-	-	-