vue写60秒验证码倒计时

vue写60秒验证码倒计时

需求：输入手机号码点击按钮获取验证码，按钮变灰色、60秒内禁止重复点击


CSS

.onclick{
    background-color: #999 !important;
    pointer-events: none;
    cursor: default;
}

HTML

<div id="phone_code">
    <div id="phone_box">
        <input type="text" placeholder="请输入手机号码" v-model="phone_number">
        <button class="layui-btn" @click="postCode(phone_number)" :class="{onclick:OnClick}">{{OnClickMsg}}button>
    div>
    <div class="code_box">
    	<input type="text" placeholder="请输入验证码" v-model="code_number">
    div>
div>

JS

new Vue({
    el: '#shop_box',
    data(){
        return{
            phone_number:'',
            code_number:'',
            OnClick:false,  //是否可以点击获取验证码
            OnClickMsg:'获取验证码',  //验证码按钮文字
            time: 60,   //倒计时时间

        }
    },
    mounted () {
    },
    methods: {
        //获取验证码
        postCode:function(){
            let _this =this;
            var regMoblie = /^1[345678]\d{9}$/;
            if(!regMoblie.test(_this.phone_number)) {
                layer.msg('该手机号格式错误');
                return;
            }else {
                axios.post('/index/shop/getcode',{
                    mobile: _this.phone_number,
                }).then(function (response) {
                    _this.OnClick = true;   //禁止点击获取验证码
                    _this.countdown();  //倒计时
                }).catch(function () { // 请求失败处理
                });
            }
        },
        //60s倒计时
        countdown:function () {
            let _this = this;
            if(_this.time == 0 ) {
                _this.OnClickMsg = '获取验证码';
                _this.time = 60;
                _this.OnClick = false;
                return ;
            }
            setTimeout(function () {
                _this.countdown()
            },1000);
            _this.time--;
            _this.OnClickMsg = _this.time + "s重新获取";
        },
    }
});