Input

表单组件 Input输入框

注意

Input组件只能对以下类型的type作出相应 : text,password, email, number, search, tel, and url. 但是不适用一下类型: checkbox, radio, toggle, range, select, etc.

如何引入

// 引入
import { Input } from 'vimo'
// 安装
Vue.component(Input.name, Input)
// 或者
export default{
  components: {
    Input
 }
}

关于输入验证

只在blur阶段才进行
check默认关闭, check只是作为内部正误标示, 只有开启了检查, 才会发出onValid和onInvalid两个事件, 外部提交判断需要额外代码判断(内部isValid变量).
如果check开启, 但是regex无值, 则使用内置判断(如下).
如果regex有值, 则自动开启check, 支持的regex可以使正则, 也可以是返回Boolena的函数, 传入参数为传入的value
内部验证的typ如下

内置的验证type

名称	类型	内部类型	说明
整数	integer	number	整数
正整数	positiveInteger	number	正整数
负整数	negativeInteger	number	负整数
邮箱	email	email	电子邮件
IP地址	ip	number	IP地址
身份证	idCard	text	严格验证
密码	password	password	密码需6-18位，以字母开头可含数字
国内电话	tel	tel	正确格式为：XXXX-XXXXXXX，XXXX- XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
国内手机号	mobile	tel	13/14/15/18/17开头
验证汉字	cn	text
验证码	securityCode	number	至少4位数字
昵称	nickName	text	可由中英文字母、数字、"-"、"_"组成。
QQ号码	qq	number	qq: 1-9开头，最少5位。
网址URL	url	url	网址URL, 必须以(https,http,ftp,rtsp,mms)开头

源码:: input/input.vue , line 2

传入属性 / Props:

Name	Type	Attributes	Default	Description
`clearInput`	Boolean	<optional>		如果为true, 当输入值的时候一个清除按钮会在input右边出现, 点击按钮则清除输入.
`clearOnEdit`	Boolean	<optional>		如果为true, 当再次输入的时候会清空上次的输入, 如果type为password时默认为true, 其余情况默认为false, 默认值的变更, 需要js控制
`disabled`	Boolean	<optional>		如果为true, 用户无法输入
`showFocusHighlight`	Boolean	<optional>		focus时底部是否 highlight 显示
`showValidHighlight`	Boolean	<optional>		验证成功是否显示 highlight 显示
`showInvalidHighlight`	Boolean	<optional>		验证失败是否显示 highlight 显示
`max`	Number	<optional>		设置最大值, 1. type=number时限制输入数字的大小; 2. type=text时限制输入字符的长度
`min`	Number	<optional>		设置最小值, 1. type=number时限制输入数字的大小; 2. type=text时限制输入字符的长度
`decimal`	Number	<optional>	`2`	设置数字的小数位, 默认为2
`step`	Number	<optional>		设置数字变化的阶梯值, 只对type=number有效
`mode`	String	<optional>	`'ios'`	当前平台
`placeholder`	String	<optional>		占位文字
`readonly`	Boolean	<optional>		只读模式, 不能修改
`type`	String	<optional>	`'text'`	输入的类型: "text", "password", "email", "number", "search", "tel", or "url"
`value`	*	<optional>		内容输入值
`debounce`	Number	<optional>	`0`	触发间隔
`regex`	RegExp	<optional>		自定义正则
`check`	Boolean	<optional>		是否check输入结果, 如果regex有值, 则开启, 否则关闭. 如果check开启, 但是regex无值, 则使用内置判断. 默认关闭check, check只是作为内部正误标示, 对外提交不起作用, 如果点击能知道各个input的状态, 需要在dom中search'ng-invalid'类名, 这样的话, 验证位置就会统一.

对外事件 / Fires:

用法 / Usages

<Input placeholder="Text Input">
<Input placeholder="Clear Input" clearInput></Input>
<Input placeholder="请输入手机号" type="mobile" check clearInput></Input>
<Input placeholder="请输入至少4位" type="securityCode" check clearInput></Input>
<Input placeholder="XX-XX-XXX格式" type="text" check :regex=/\d{2}-\d{2}-\d{3}/ clearInput></Input>