vue+element表单注册验证码倒计时

2019-11-27  本文已影响0人  年轻人不喝鸡汤

vue中的部分代码

<el-button :disabled="!show" @click="AcquireValidation(addUserSignal.phone, 'registForm')">
                <span v-show="show">获取验证码</span>
                <span v-show="!show" class="count">{{ count }} s</span>
</el-button>

js中的代码

<script>
  const TIME_COUNT = 60 // 倒计时的时间
  export default {
     data() {
      return {
        show: true,
        count: '',
        timer: null
    },
    methods: {
      AcquireValidation (registForm){
         if (!this.timer) {
              console.log(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>
上一篇 下一篇

猜你喜欢

热点阅读