vue获取手机验证码60秒倒计时，不能点击按钮

最新推荐文章于 2026-07-10 16:30:28 发布

原创最新推荐文章于 2026-07-10 16:30:28 发布 · 1.3w 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue项目开发

当前文章被收录于：

vue项目开发

27 篇文章 2 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用Vue实现的手机验证码60秒倒计时功能。通过设置定时器，按钮在倒计时期间变为不可点击状态，并显示剩余时间。倒计时结束后，按钮恢复初始状态。

vue获取手机验证码60秒倒计时，不能点击按钮

export const resend = element => {
  console.log(element)
  var num = 60
  var timer = setInterval(function () {
    num--
    element.innerHTML = num + '秒后重新获取'
    element.style.color = ' #ccc'
    element.disabled = ' disabled'
    if (num === 0) {
      element.disabled = ''
      element.style.color = ' #ffa600'
      element.innerHTML = '获取验证码'
      clearInterval(timer)
    }
  }, 1000)
}