input vue 组件

一款可配置 的 input 组件

组件参数

type

1. email e-mail 地址的字段
2. password 定义密码字段
3. text 定义一个单行的文本字段
4. tel 定义用于输入电话号码的字段 ... H5 规范中的都可以使用

<input-box  :type="'tel'"  :name="'user'">账号：</input-box>   

maxSize 最大字符限制 默认 100

reg 自定义正则匹配规则

<input-box  :reg="`^[0-9]`" :name="'user'">账号：</input-box>                   

inputStyle input 的样式修改

可以修改 input 的样式

inputBoxStyle 外面div的样式修改

修改外面盒子的包边

ruleName 默认提供一下名称

1. email 邮箱 /^(?:[a-z0-9]+[_-+.]+)[a-z0-9]+@(?:([a-z0-9]+-?)[a-z0-9]+.)+([a-z]{2,})+$/

2. tel 手机 /^(+86)?\s?0?(13|14|15|18|17)[0-9]{9}$/

3. post 邮政编码 /^\d{6}$/

4. cn 中文字符 /[\u4e00-\u9fa5]/

5. idcard 身份证 /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/

6. user 用户名 (15个中文|字符) ^[\u0026\u0023\u0031\u0038\u0033\u003b\u002e\u2022a-zA-Z\u4e00-\u9fa5]{1,15}$

7. ip ip地址 /(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d).(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d).(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d).(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)/

例子 验证手机

 <input-box :ruleName="'tel'" :type="'number'" @val="nameFun" :name="'user'">账号：</input-box>    

slot 提供 图片替换，但是要自己加样式

name='delete-icon' 删除图片替换 name='normal-icon' 右侧显示图片 ，我在密码模式下提供了一个图片，其实在什么模式下都可以显示，可以根据自己需要替换

@val 返回当前输入的值,和规则验证