vue获取(短信or邮箱)验证码组件

9 篇文章 0 订阅

<template>
    <button 
        :style="config.cssSet?config.cssSet:''" 
        class="common-getCodeBtn" 
        @click="togetCode"
        :disabled="isGetting"
        >{{ message?message:config.initText }}</button>
</template>

<script>
    import { toSendShortCode,toSendEmailCode,toCheckPhoneNum,toCheckEmailNum } from '../../utils/api'
    export default {
        name:'getCode',
        props:{
            config:{//样式配置
                type: Object
            },
            inputVal:{//参数值
                type:String
            },
            types:{//1代表电话号码 2代表邮箱
                type:Number
            }
        },
        data() {
            return {
                message:'',
                isGetting:false//防止重复点击
            }
        },
        methods:{
            togetCode() {    
                let inputVal = this.inputVal;    
                console.log("传进来的参数:"+inputVal)
                //检验传入的参数格式是否正确
                let checkResult = this.types ===1 ? toCheckPhoneNum(inputVal) : toCheckEmailNum(inputVal)
                if( !checkResult ){
                    this.$emit('resultFun',1)
                    return;
                }
                this.isGetting = true;
                let t = 120;
                let _this = this;
                for( let i = 1; i <= t; i++ ) {
                    window.setTimeout(()=>{
                        
                        _this.update_a(i,t)
                        
                    }, i * 1000);
                }
                this.toSendShortCodes(inputVal)
            },
            update_a( num, t ) {    
                //倒数
                if( num == t ) {                
                    this.message = this.$t("components_getCode.sendAgain");    
                    this.isGetting = false;
                } else {                    
                    var printnr = t - num;
                    this.message = printnr + this.$t("components_getCode.timeToSend");                        
                }
            },
            toSendShortCodes(p) {
                //调用发送api
                let result = this.types ===1 ? toSendShortCode({
                    "phoneCode": 86,
                    'phone': p,
                    'type': 7,
                }) : toSendEmailCode({
                    'email': p
                })
                this.$emit('resultFun',result)
            }
        }
        
    }
</script>

<style>
</style>

该组件兼顾了短信和邮箱验证码的发送,以及vue国际化开发,详细的封装过程请移步本人github

https://github.com/woshiitdaniu/vue-getcode-components

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值