Trendyol 接码网[630W]

在Vue中实现一个倒计时按钮，用于获取验证码并倒计时60秒，可以通过以下步骤完成。

在你的Vue组件中创建一个模板，包含一个按钮和一个计时器显示，计时器显示可以使用一个数据属性来存储当前时间，使用Vue的methods来更新计时器并处理按钮点击事件，下面是一个简单的示例代码：

<template>
  <div>
    <button :disabled="isButtonDisabled" @click="sendVerificationCode">获取验证码</button>
    <span v-if="timerCount">{{ timerCount }}秒后重新发送</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timerCount: 60, // 初始倒计时时间
      isButtonDisabled: false, // 按钮禁用状态
      timer: null // 用于存储计时器的实例
    };
  },
  methods: {
    sendVerificationCode() {
      this.isButtonDisabled = true; // 禁用按钮防止重复点击
      this.timerCount = 60; // 重置倒计时时间
      this.startTimer(); // 开始倒计时
    },
    startTimer() {
      this.timer = setInterval(() => {
        if (this.timerCount > 0) {
          this.timerCount--; // 每秒倒计时减一
        } else {
          clearInterval(this.timer); // 倒计时结束，停止计时器并启用按钮
          this.isButtonDisabled = false; // 重新启用按钮允许发送验证码请求
        }
      }, 1000); // 每秒更新一次计时器数据（单位毫秒）
    }
  }
};
</script>

在这个例子中，当用户点击按钮时，会触发sendVerificationCode方法，这个方法会禁用按钮以防止用户重复点击，然后重置倒计时时间并开始倒计时，倒计时每秒更新一次，直到时间到达零，此时计时器被清除并重新启用按钮，这样用户就可以再次点击按钮获取验证码了。