美文网首页
vue+element表单注册验证码倒计时

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

作者: 年轻人不喝鸡汤 | 来源:发表于2019-11-27 11:38 被阅读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>

相关文章

网友评论

      本文标题:vue+element表单注册验证码倒计时

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