npm-gecode v1.0.2

vue-gecode

基于Vue2.0获取手机验证码插件,可高度自定义.

这里是可爱的Demo

安装和使用

npm install vue-gecode --save-dev

• 作为全局组件使用

//在项目入口文件
import Vue from 'vue'
import geCode from 'vue-gecode'
Vue.component('geCode', geCode)

• 作为局部组件

//在某个组件中
import geCode from 'vue-gecode'
export default {
  components: {
    geCode
  }
}

HTML中使用:

<template>
	<ge-code :config=config></ge-code>
</template>

<script>
export default {
	data(){
	  return {
	    config:{
	      //开始时候的文本
	      startText: '获取验证码',
	      //获取验证码结束后文本
	      endText: '再次获取',
	      //验证码倒计时总时间(秒)
	      totalTime: 60,
	      //验证码每次隔多久变一次(秒)
	      tickTime: 1,
	      //自定义倒计时期间文本的显示内容
	      computeText(num){
	        return '重新获取 ' + num + 's';
	      },
	      //是否可以发送 
	      canTodo: () => {
	        return /^1[345678]\d{9}$/.test(15232509223);
	      },
	      //canTode验证成功后执行 发送短信验证码
	      todo: () => {
	        //这里写验证码的获取程序
	      }
	    }
	  }
	}
}

</script>

运行demo

//1. 下载代码
git clone https://github.com/GeSnowBoy/vue-gecode.git

//2. 进入目录
cd vue-gecode

//3. 安装依赖
npm install

//4. 运行demo
npm start

API

Props

config属性说明