vue+vant 实现的获取验证码倒计时按钮

一个非常简单也是非常常用的逻辑
就是登录时获取手机验证码的并且倒计时的按钮逻辑
我用的是移动端的ui插件vant

引入vant的方式就不再赘述了详情请看vant官网
https://vant-contrib.gitee.io...

直接上代码

    
    获取验证码
    获取验证码

其实逻辑不是很难
我这里用了三个按钮逻辑分别是
最开始手机输入框的长度如果不够6位的话获取验证码的按钮是disabled
长度大于等于6位的话获取验证码可点击 点击后显示倒计时countdown按钮

在data中

data(){
    return{
        phone: '',//手机号
        time: 60 * 1000,//倒计时的时间  毫秒级 60秒要*10000
        showCountdown: false//是否显示倒计时
    }
}

methods中

methods:{
    getSmsCode(){
        this.showCountdown = true//这里只是简单的显示倒计时逻辑获取验证码需要具体的接口
    },
    countDownFinish(){//倒计时结束后的方法
        this.showCountdown = false //隐藏倒计时
    }
}