vue 短信验证码

Posted 2020-10-13 沙滩多啦图

Vue.component(‘timerBtn‘,{
    template: ‘<button v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button>‘,
    props: {
        second: {
            type: Number,
            default: 60
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    data:function () {
        return {
            time: 0
        }
    },
    methods: {
        run: function () {
            this.$emit(‘run‘);
        },
        start: function(){
            this.time = this.second;
            this.timer();
        },
        stop: function(){
            this.time = 0;
            this.disabled = false;
        },
        setDisabled: function(val){
            this.disabled = val;
        },
        timer: function () {
            if (this.time > 0) {
                this.time--;
                setTimeout(this.timer, 1000);
            }else{
                this.disabled = false;
            }
        }
        
    },
    computed: {
        text: function () {
            return this.time > 0 ? this.time + ‘s 后重获取‘ : ‘获取验证码‘;
        }
    }

});

 

 

<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" ></timer-btn>

var vm = new Vue({
    el:‘#app‘,
    methods:{
        sendCode:function(){
            vm.$refs.timerbtn.setDisabled(true); //设置按钮不可用
            hz.ajaxRequest("sys/sendCode?_"+$.now(),function(data){
                if(data.status){
                    vm.$refs.timerbtn.start(); //启动倒计时
                }else{
                    vm.$refs.timerbtn.stop(); //停止倒计时
                }
            });
        },
    }
});