前端vue实现验证码60秒倒计时，按钮控制

 HTML部分

<el-form ref="verifyMessageCodeRef" :model="verifyMessageCode" label-width="200px"
         :rules="verifyMessageCodeRules">
  <el-form-item label="请输入手机验证码" />
  <el-form-item label="手机验证码" prop="verifyMessageCode">
    <el-input style="width: 60%;" v-model="verifyMessageCode.verifyMessageCode"/>
    <el-button
      :style="!isButtonDisabled?'background: #2385F1;color: #FFFFFF;border-radius: 8px;margin-left: 10px' : 'background: #2385F177;color: #FFFFFF77;border-radius: 8px;margin-left: 10px'"
      @click="getMessageCode"
      :disabled="isButtonDisabled"
    >获取验证码</el-button>
    <span v-if="isButtonDisabled">
      {{secondsLeft }}秒后重试
    </span>
  </el-form-item>
</el-form>

js部分：

export default {
    data(){
        return{
            isButtonDisabled: false, // 是否开启了倒计时
            secondsLeft: 60, // 倒计时60s
            countdown: null // 定时器开关
        }
    },
    methods:{
        getMessageCode() {
          if (this.isButtonDisabled) {
            return
          }

          // 调用 API 获取验证码
          this.$api.project.getMessageCode().then((res) => {
            if (res.code === '00000') {
              this.$message.success('获取验证码成功')
            }
          })

          // 禁用按钮并开始倒计时
          this.isButtonDisabled = true
          this.secondsLeft = 60

          this.countdown = setInterval(() => {
            this.secondsLeft--
            if (this.secondsLeft <= 0) {
              clearInterval(this.countdown)
              this.isButtonDisabled = false
            }
          }, 1000)
        },
        cancelCountdown() { // 清除倒计时
          clearInterval(this.countdown)
          this.isButtonDisabled = false
          this.secondsLeft = 60
        }
    }

}

欢迎各位大佬留言讨论