vue 短信验证码倒计时

Question

<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秒后重新获取按钮

老铁们，帮忙看看>_<

Answer 1

这跟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)
    }
}

Answer 2

倒计时和按钮分成两个dom在同一个位置 用v-if用区分一下

Answer 3

你可以在点击事件里加一个标志位
@click='once%%handleclick()'

点击时this.once=false;

倒计时结束后 this.once=true