基于 Vue2.0 的移动端 / PC 端验证码输入组件.

来源：互联网发布：js时间戳转为date 本地编辑：程序博客网时间：2024/05/17 06:53

vue-input-code

基于Vue2.0的移动端验证码输入组件.

功能预览

输入回调
完成回调
自定义验证码个数
样式可控

这里是可爱的Demo

支持

支持 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中使用:

<vue-input-code span-size="20px" type="number" :number="5" height="50px" span-color="#f35252" input-color="#3498db" input-size="24px" :code="code" :getinput="getInput" :success="success"></vue-input-code>

API

Props

参数类型说明可选值默认值code数组用户输入的验证码数组——type字符串用户输入类型number,textnumbergetinput函数用户每次输入后的回调函数,接受一个验证码字符串——success函数用户输入完成后的回调函数,接受一个验证码字符串——span-size字符串输入后的字体显示大小—20pxspan-color字符串输入后的字体显示颜色—#f35252input-size字符串输入框的字体显示大小—20pxinput-color字符串输入框的字体显示颜色—#000number数字验证码个数—6height字符串整个框的显示高度—60px

http://www.tuicool.com/articles/Z7byuq

https://github.com/zhouyuexie/vue-input-codeB

0 0