vue组件系列-验证码倒计时组件

Posted 2021-03-15 sybboy

<style scoped>
    .veri-code{
        width: 100%;
        .veri-send{
            width: 100%;
            height: 91px;
            position:relative;
            overflow:hidden;
            >.sendBtn{
                background:url(../assets/images/hongbao_code_btn.jpg) 100% 100% no-repeat;
                background-size: contain;
                display: inline-block;
                width: 171px;
                height: 91px;
                z-index:2;
                position: absolute;
                right:0;
                top:0;
                span{
                    display: inline-block;
                    width: 171px;
                    height: 91px;
                    line-height: 91px;
                    text-align: center;
                    font-family: PingFangSC;
                    font-size: 32px;
                    font-weight: 600;
                    color: #c31222;
                }
            }
        }
        .veri-activated{
            >.sendBtn{
                span{
                    background:url(../assets/images/hongbao_code_btn_disabled.jpg) 100% 100% no-repeat;
                    background-size: contain;
                    color:#8e0612;
                }
            }
        }
    }
</style>

<template>
    <div class="veri-code">
        <div :class="[‘veri-send‘,{‘veri-activated‘:isSended || activityEnd}]">
            <txt-input placeholder="请输入手机号" max-length="11" type="tel"></txt-input>
            <div class="sendBtn">
                <span v-if="!isSended" @click="getVeriCode">验证码</span>
                <span v-if="isSended">{{seconds}}s</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from ‘vue‘;
    import TxtInput from ‘./TxtInput.vue‘;
    import bus from ‘../lib/bus‘;
    export default Vue.extend({
        name:‘veri-code‘,
        components:{
            ‘txt-input‘:TxtInput
        },
        data(){
            return {
                seconds:60,
                left_time:0,
                isSended: false
            }
        },
        props: {
            sended: {
                default: this.isSended
            },
            activityEnd:{
                default: false
            }
        },
        watch:{
            sended: function(val,oldVal){
                this.isSended = this.sended;
                if(this.sended & this.left_time == 0){
                    let _this = this,flag = this.seconds;
                    let setSended = () => {
                        clearInterval(timmer);
                        _this.isSended = false;
                        _this.seconds = flag;
                        _this.$parent.codeSended = false;
                    };
                    let timmer = setInterval(function(){
                        _this.seconds > 1 ? _this.seconds-- : setSended()
                    },1000);
                }
            },
            left_time: function(val,oldVal){
                this.defaultState()
            }
        },
        methods: {
            getVeriCode: function(){
                this.$parent.getVeriCode()
            },
            defaultState: function(){
              if(this.left_time != 0){
                let _this = this,flag = this.seconds;
                this.seconds = this.left_time
                this.sended = true
                let setSended = () => {
                    clearInterval(timmer);
                    _this.sended = false;
                    _this.seconds = flag;
                    this.left_time = 0;
                };
                let timmer = setInterval(function(){
                    _this.seconds > 0 ? _this.seconds-- : setSended()
                },1000);
              }
            },
        },
        // created(){
        //   this.defaultState()
        // }
    })
</script>