vue实现验证码倒计时

2019-07-18  本文已影响0人  coolSummer003

我这里用的是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>
上一篇 下一篇

猜你喜欢

热点阅读