vue点击按钮验证码倒计时

最新推荐文章于 2024-06-11 07:57:19 发布

程序媛_panpan

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量276

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46186815/article/details/131514170

版权

<!-- html部分 -->
  <el-button type="primary" :disabled="isSend" @click="countDown">
          {{ codeName }}
        </el-button>
 
 
const state = reactive({
        isSend: false,
        codeName: '获取验证码',
        totalTime: 10, //一般是60
        timer: '', //定时器
      })
 
      const countDown = () => {
        if (state.isSend) return
        // getCode() // 获取验证码的接口
        state.isSend = true
        state.codeName = state.totalTime + 's后重新发送'
        state.timer = setInterval(() => {
          state.totalTime--
          state.codeName = state.totalTime + 's后重新发送'
          if (state.totalTime < 0) {
            clearInterval(state.timer)
            state.codeName = '重新发送验证码'
            state.totalTime = 10
            state.isSend = false
          }
        }, 1000)
      }