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

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

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

直接上代码

<van-field v-model="phone" clearable  maxlength="15" label="手机号" left-icon="phone-circle-o" placeholder="请输入手机号">
    <van-button v-if='phone.length >= 6 && showCountdown == true' ref="smsCode"  slot="button" size="mini"><van-count-down :time="time"  @finish='countDownFinish' format=" ss 秒后重试" /></van-button>
    <van-button v-else-if="phone.length >=6"  @click="getSmsCode"  slot="button" size="mini">获取验证码</van-button>
    <van-button v-else     disabled    slot="button" size="mini">获取验证码</van-button>
</van-field>

其实逻辑不是很难
我这里用了三个按钮逻辑分别是
最开始手机输入框的长度如果不够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 //隐藏倒计时
    }
}

Tags 标签

加个好友，技术交流