quark-input v1.0.1

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}(01-9|1012)(01-9|12\d|301)\d{3}(\d|X)$/

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

7. ip ip地址 /(250-5|20-4\d|0-1\d{2}|1-9?\d).(250-5|20-4\d|0-1\d{2}|1-9?\d).(250-5|20-4\d|0-1\d{2}|1-9?\d).(250-5|20-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 返回当前输入的值,和规则验证