基于 Vue2.0 的移动端 / PC 端验证码输入组件.
本文共 754 字，大约阅读时间需要 2 分钟。
vue-input-code
基于Vue2.0的移动端验证码输入组件.
功能预览
- 输入回调
- 完成回调
- 自定义验证码个数
- 样式可控
支持
支持 Vue.js 2.0+.
安装和使用
npm install vue-input-code --save
- 作为全局组件使用
//在项目入口文件import Vue from 'vue'import VueInputCode from 'vue-input-code'Vue.component('VueInputCode', VueInputCode) - 作为局部组件
//在某个组件中import VueInputCode from 'vue-input-code'export default { components: { VueInputCode }} HTML中使用:
API
Props
| 参数 | 类型 | 说明 | 可选值 | 默认值 |
|---|---|---|---|---|
| code | 数组 | 用户输入的验证码数组 | — | — |
| type | 字符串 | 用户输入类型 | number,text | number |
| getinput | 函数 | 用户每次输入后的回调函数,接受一个验证码字符串 | — | — |
| success | 函数 | 用户输入完成后的回调函数,接受一个验证码字符串 | — | — |
| span-size | 字符串 | 输入后的字体显示大小 | — | 20px |
| span-color | 字符串 | 输入后的字体显示颜色 | — | #f35252 |
| input-size | 字符串 | 输入框的字体显示大小 | — | 20px |
| input-color | 字符串 | 输入框的字体显示颜色 | — | #000 |
| number | 数字 | 验证码个数 | — | 6 |
| height | 字符串 | 整个框的显示高度 | — | 60px |
http://www.tuicool.com/articles/Z7byuq
B
转载地址：http://kyeni.baihongyu.com/
你可能感兴趣的文章
hibernate(2)---入门示例
查看>>
struts2(2)---入门示例
查看>>
springmvc(2)---入门示例
查看>>
java(20)---克隆
查看>>
java(20)---克隆的第二种方式：串行化
查看>>
mybatis(2)---入门示例
查看>>
mybatis(3)---使用mybatis对表进行CRUD操作
查看>>
mybatis(4)---优化配置文件中的配置
查看>>
mybatis(6)---mapper动态代理方式
查看>>
mybatis(5)---如何解决实体类中字段和数据表字段不对应引发的问题
查看>>
Activity(1)---搭建环境
查看>>
jbpm(2)---搭建jbpm开发环境
查看>>
springSecurity(1)---入门示例
查看>>
jbpm(3)---jbpm入门示例
查看>>
jbpm(4)---流程局部变量
查看>>
jbpm(5)---decision节点的expr方式和handler方式
查看>>
S2SH---（Struts2+Spring+Hibernate）
查看>>
Lucene(1)---入门示例
查看>>
ssm---(springMvc+spring+mybatis)
查看>>
log4j---详解
查看>>