云迈博客

您现在的位置是:首页 > 前端技术 > 正文

前端技术

发送验证码倒计时60s的实现

袁叶2020-10-27前端技术320
实现代码如下:```javascript获取验证码{{count}}s//验证码倒计时getCode(){constTIME_COUNT=60;if(!this.time

实现代码如下:

<view class="input-row-login">
    <input class="uni-input input-cc2" v-model="code" placeholder="请输入验证码" />
    <text class="btn" v-show="show" @click="toSend">获取验证码</text>
    <text class="btn-no" v-show="!show">{{count}} s</text>
</view>

data() {
    return {
        show: true,
        count: '',
        timer: null
    }
},
toSend() {
    sendSms({phone:this.phone}).then((res)=>{
        this.api.toast('已发送验证码')
        this.getCode()
    })
},
//验证码倒计时
getCode(){
  const TIME_COUNT = 60;
  if (!this.timer) {
    this.count = TIME_COUNT;
    this.show = false;
    this.timer = setInterval(() => {
    if (this.count > 0 && this.count <= TIME_COUNT) {
      this.count--;
     } else {
      this.show = true;
      clearInterval(this.timer);
      this.timer = null;
     }
    }, 1000)
   }
}

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~