vue写一个获取短信验证码倒计时60秒然后可以重新获取

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Red_sevenWord/article/details/100743739

上次写了react的倒计时，今天来写vue的

上图，效果是和react一样的


开始上代码，结构。使用的框架是vant

<div class="list">
    <div class="left">手机号码</div>
    <div class="mid">
        <input type="text" maxlength="11" v-model="newcall" placeholder="请输入">
    </div>
    <div class="right">
        <van-button @click="getyzcode" :disabled="attcode" v-if="showbtn">获取验证码</van-button>
        <button class="tsbtn" v-else>{{code_ts}}</button>
    </div>
</div>

参数数据

data () {
    return {
        confirm: true,  //提交验证按钮判断
        attcode: true,  //点击获取验证码按钮判断
        showbtn: true, // 展示获取验证码或倒计时按钮判断
        yzcode: '',
        code_ts: '获取验证码', //倒计时提示文字
        sec: 60 // 倒计时秒数
    }
},

methods函数

getyzcode () {
    var timer = setInterval(() => {
        this.sec = this.sec-1
        this.code_ts = this.sec + 'S后重试'
        this.showbtn = false
        if (this.sec === 0) {
            clearInterval(timer)
            this.sec = 60
            this.code_ts = this.sec + 'S后重试'
            this.showbtn = true
        }
    }, 1000)
}

可以监听对于手机号的校验，控制按钮是否禁用

watch: {
    newcall: function (value) {
        var reg = /\b1[3456789]\d{9}\b/g
        let val = reg.test(value)
        if (val) {
            this.attcode = false
        } else {
            this.attcode = true
        }
    }
}

应该就是这些了。
效果图再来一个