vue 短信验证码倒计时

clipboard.png

<template>
<div>
    <group title="验证码">
        <x-input title="发送验证码" placeholder="请输入验证码">
            <x-button slot="right" type="primary" action-type="button" mini>发送验证码</x-button>
        </x-input>
    </group>
</div>
</template>

<script>
import { Confirm,XInput, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux';
import Vue from 'vue';
import  { ConfirmPlugin } from 'vux';
Vue.use(ConfirmPlugin);

export default {
    directives: {
        TransferDom
    },
    components: {
        Confirm,
        Group,
        XSwitch,
        XButton,
        XInput
    },
    data () {
        return {
        }
    },
    methods: {
    }
}
</script>

问题:获取手机验证码60秒倒计时,不能点击按钮;60秒后重新获取按钮

老铁们,帮忙看看>_<

阅读 5.4k
评论
    3 个回答
    • 1.4k

    这跟jquery的也没区别啊……
    button加个事件:

    <x-button slot="right" type="primary" action-type="button" mini @click="sendMessage">{{word}}</x-button>

    加两个属性:

    data(){
        return {
           word: '发送验证码',
           isOvertime: false
        }
    },
    methods: {
        sendMessage(){
            if(this.isOvertime){
                return false;
            }
            let that = this,
                time = 60;
            var sendTimer = setInterval(function(){
                that.isOvertime = true;
                time--;
                that.word = "重新发送"+time;
                if(time < 0){
                    that.isOvertime = false;
                    clearInterval(sendTimer);
                    that.word = "获取验证码";
                }
            },1000)
        }
    }
      相似问题
      推荐文章