防抖实例-短信验证-倒计时

最新推荐文章于 2022-11-11 17:02:35 发布

前端攻城狮·左大

最新推荐文章于 2022-11-11 17:02:35 发布

阅读量328

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46719868/article/details/118484832

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

在这里插入图片描述
代码实现

   <el-form-item label="短信验证码:" prop="verificationCode">
          <el-input clearable v-model="addBankCardForm.verificationCode" placeholder="请输入短信验证码">
            <el-button @click="getPhoneNumber(addBankCardForm)" slot="append">
              <span v-if="isTime">获取验证码</span> <span v-else>重新发送{{ second }}秒</span></el-button
            >
          </el-input>
        </el-form-item>

data部分

 return {
      second: '60',
      click: true,
      isTime: true,
      }

js部分

   //获取验证码 请求绑定
    getPhoneNumber(addBankCardForm) {
      if (this.second == 60 && this.click) {
        this.$refs.addBankCardFormRef.validate(valid => {
          if (!valid) return
          api.applyBindBankCard(addBankCardForm).then(res => {
            if (res.success) {
              this.$message.success(res.msg)
              this.click = false
              this.isTime = false
              const ints = setInterval(() => {
                if (this.second > 1) {
                  this.second--
                } else {
                  clearInterval(ints)
                  this.second = 60
                  this.isTime = true
                  this.click = true
                }
              }, 1000)
            } else {
              this.$message.error('获取失败')
            }
          })
        })
      }
    },