使用Vue纯前端实现发送短信验证码并实现倒计时

<template>
  <div>
    <input type="tel" v-model="phone" placeholder="请输入手机号">
    <button @click="sendCode" :disabled="countdown > 0">
      {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
    </button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      phone: '',
      countdown: 0, // 倒计时时间
      timer: null, // 计时器
    };
  },
  methods: {
    sendCode() {
      if (!this.phone) {
        alert('请输入手机号');
        return;
      }
      // 模拟发送短信验证码的过程
      this.startCountdown();
      // 实际项目中，这里应该是发送请求到后端接口发送短信
      // 例如: this.axios.post('/api/send-sms', { phone: this.phone }).then(response => {
      //   // 处理响应数据
      // });
    },
    startCountdown() {
      if (this.timer) return;
      this.countdown = 60; // 设置倒计时时间，如60秒
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    }
  }
};
</script>

这段代码实现了一个简单的发送短信验证码按钮，并添加了60秒倒计时的功能。用户点击按钮后，如果手机号码未输入，会弹出警告。如果手机号码已输入，则会触发倒计时，实际应用中，需要替换发送短信的接口调用。