quark-input
v1.0.1
Published
一款可配置 的 input 组件
Downloads
3
Readme
input vue 组件
一款可配置 的 input 组件
组件参数
type
- email e-mail 地址的字段
- password 定义密码字段
- text 定义一个单行的文本字段
- 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}$/
post 邮政编码 /^\d{6}$/
cn 中文字符 /[\u4e00-\u9fa5]/
idcard 身份证 /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/
user 用户名 (15个中文|字符) ^[\u0026\u0023\u0031\u0038\u0033\u003b\u002e\u2022a-zA-Z\u4e00-\u9fa5]{1,15}$
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' 右侧显示图片 ,我在密码模式下提供了一个图片,其实在什么模式下都可以显示,可以根据自己需要替换