vue-gecode

0.0.6 • Public • Published

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,
        //倒计时执行期添加的class 默认 isRun
        activeClass: 'isRun',
        //自定义倒计时期间文本的显示内容
        computeText(num) {
            //num 倒计时时间
            return '重新获取 ' + num + 's';
        },
        //是否可以发送 
        canTodo: () => {
            //返回值判定是否可以发送
            let result = /^1[345678]\d{9}$/.test(this.phone);
            console.log('判断是否可以发送验证码',result);
            if(!result){
                alert('手机号格式不正确');
            }
            return result;
        },
        //canTode验证成功后执行 发送短信验证码
        todo: () => {
            //这里写验证码的获取程序
            console.log('发送验证码')
        },
        //发送完成后的回调
        endCallback(type, config) {
            //type 回调产生原因  0: 时间结束   其他值由this.$refs.geCode.stop(1)调入自定义
            //config config配置  
            console.log('发送完成后的回调', type, config);
    
        },
        //每次点击都会被调用
        click(isRun) {
            //isRun 是否在运行中
            console.log(`当前验证码状态是:${isRun ? '发送中' : '可发送'}状态`)
        },
        //是否可用   默认ture
        canUse: true,
        //不可用时的类名  默认no-can
        noCanClass: 'no-can',
        }
  }
}
}
</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 对象 唯一配置参数,详情见下

config属性说明

参数 类型 说明 是否必须 默认值
startText 字符串 未输入时显示文字 获取验证码
endText 字符串 验证码发送完成后显示文字 再次获取
computeText 函数 每次时间减少显示的文字,参数为剩余时间 默认返回->重新获取 * s
activeClass 字符串 验证码倒计时添加的类名 isRun
totalTime 数值 获取验证码后的倒计时总数(s) 60
tickTime 数值 每次减少的时间(s) 1
canTodo 函数 判断是否可以发送验证码
todo 函数 验证成功后调用,在这里发送验证码 -
endCallback 函数 验证码结束回调 -
click 函数 每次点击都会被调动 function -
canUse 布尔值 是否可用 true
click 字符串 不可用时添加的类名 no-can

Dependencies (0)

    Dev Dependencies (12)

    Package Sidebar

    Install

    npm i vue-gecode

    Weekly Downloads

    1

    Version

    0.0.6

    License

    ISC

    Unpacked Size

    1.06 MB

    Total Files

    16

    Last publish

    Collaborators

    • gebaoyuan