美文网首页
vue实现验证码倒计时

vue实现验证码倒计时

作者: coolSummer003 | 来源:发表于2019-07-18 14:35 被阅读0次

我这里用的是vant-ui 如果用其他UI的小伙伴请修改template中的按钮结构

<template>
  <div>
      <van-button slot="button" size="small" type="danger" v-show="show" @click="getCode">发送验证码</van-button>
      <van-button slot="button" size="small" type="danger" v-show="!show" >{{count}} s</van-button>
  </div>
</template>
<script>
export default {
    data() {
        return {
            show: true,
            count: '',
            timer: null
        }
    },
    methods:{
          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)
              }
         } 
    }
}
</script>

相关文章

网友评论

      本文标题:vue实现验证码倒计时

      本文链接:https://www.haomeiwen.com/subject/qyrllctx.html