vue 实现发送短信验证码后按钮的倒计时及禁用功能

参考网上的写过一个,但是第二次发送验证码倒计时会加快,调整后可用。话不多说,直接上代码。
页面:

<div class="iptbx round">
            <div class="txt"><input type="text" class="ipttype" name="username" v-model="model.username" placeholder="手机号" @keydown.enter="login"></div>
          </div>
 <div class="check">
 			// 短信验证码输入框
            <div class="msg round">
              <div class="txt">
              <input type="text" class="ipttype" name="code" v-model="code" placeholder="短信验证码" @keydown.enter="login">
              </div>
            </div>
            // 发送验证码按钮--可点击的
            <div class="btn round" @click="sendSms()" v-if="!isDisabled">{{content}}</div>
            // 发送验证码按钮--不可点击的
            <div class="btn round wait" v-if="isDisabled">{{content}}</div>
          </div>

js:

    data () {
      return {
        isDisabled: false, //控制按钮是否可以点击(false:可以点击,true:不可点击)
        content: '获取短信验证码', // 发送验证码按钮的初始显示文字
        timer: null,
        count: '',
        model: {},
      }
    },
    methods: {
      // 发送验证码
      sendSms () {
        let vm = this
        // 校验手机号
        if (!vm.model.username || vm.model.username == '') {
          vm.$layer.msg('请输入手机号')
          return
        }
        if (!(/^1[34578]\d{9}$/.test(vm.model.username))) {
          vm.$layer.msg('请输入正确的手机号')
          return
        }
        // 请求后台发送验证码至手机(vm.model内存有username字段为用户手机号,下述方法是自己项目封装的api请求(import引入的,没在此代码块显示),可根据自己实际请求方式修改)
        getVerifyCode(vm.model).then((res) => {
          vm.isDisabled = false
        })
        // 控制倒计时及按钮是否可以点击
        const TIME_COUNT = 60
        vm.count = TIME_COUNT
        vm.timer = window.setInterval(() => {
          if (vm.count > 0 && vm.count <= TIME_COUNT){
          	// 倒计时时不可点击
            vm.isDisabled = true
            // 计时秒数
            vm.count--
            // 更新按钮的文字内容
            vm.content = vm.count + 's后重新获取'
          } else {
          	// 倒计时完,可点击
            vm.isDisabled = false
            // 更新按钮文字内容
            vm.content = '获取短信验证码'
            // 清空定时器!!!
            clearInterval(vm.timer)
            vm.timer = null
          }
        }, 1000)
      }
    }
  }
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值