关于javascript:vuevant-实现的获取验证码倒计时按钮

一个非常简单也是十分罕用的逻辑
就是登录时获取手机验证码的并且倒计时的按钮逻辑
我用的是挪动端的 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" style="color:#777" @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 // 暗藏倒计时
    }
}