quark-input

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 默认提供一下名称

email 邮箱 /^(?:[a-z0-9]+[_-+.]+)[a-z0-9]+@(?:([a-z0-9]+-?)[a-z0-9]+.)+([a-z]{2,})+$/ tel 手机 /^(+86)?\s?0?(13|14|15|18|17)[0-9]{9}$/

例子 验证手机

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

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

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

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