Vue獲取驗證碼倒計時60秒按鈕詳解

一、Vue驗證碼倒計時刷新

驗證碼是應用程序中常用的功能，倒計時60秒的按鈕是驗證碼常見的實現方式。在Vue中，可以使用定時器來實現倒計時刷新。

首先，在Vue組件中聲明一個變量代表剩餘時間，該變量的初始值為60（表示60秒）。另外，還需要聲明一個計時器，用於每隔一秒更新剩餘時間，直到剩餘時間為0。在計時器中，每一秒將剩餘時間減1，同時更新顯示在頁面上的倒計時。

  <template>
    <button @click="refreshCode()" :disabled="disabled">{{ textBtn }}</button>
  </template>

  <script>
    export default {
      data() {
        return {
          remainingTime: 60,
          timer: null
        }
      },
      computed: {
        disabled() {
          return this.remainingTime !== 60;
        },
        textBtn() {
          return this.disabled ? `${this.remainingTime}秒後可重新發送` : '獲取驗證碼';
        }
      },
      methods: {
        refreshCode() {
          this.remainingTime = 60;
          this.timer = setInterval(() => {
            this.remainingTime--;
            if (this.remainingTime === 0) clearInterval(this.timer);
          }, 1000);
        }
      },
      destroyed() {
        clearInterval(this.timer);
      }
    }
  </script>

在代碼中，使用disabled來控制按鈕是否可用。當剩餘時間不為60秒時，按鈕將變為灰色且無法點擊，表示還需要等待一段時間才能重新發送驗證碼。同時，在計時器結束後需要清除計時器，否則計時器將一直運行下去。

二、Vue發送驗證碼倒計時

發送驗證碼倒計時與驗證碼倒計時刷新的實現方式較為相似，不同之處在於發送驗證碼需要調用後端API，而刷新驗證碼則是直接在前端更新剩餘時間。

首先，在發送驗證碼的函數中，需要調用後端API並等待返回結果。當接收到成功的響應後，才開始啟動倒計時計時器。與刷新驗證碼不同的是，在啟動計時器之前，要將發送按鈕禁用掉。另外，在計時器結束後，也要將按鈕重新啟用。

  <template>
    <button @click="sendCode()" :disabled="disabled">{{ textBtn }}</button>
  </template>

  <script>
    export default {
      data() {
        return {
          remainingTime: 60,
          timer: null,
          disabled: false
        }
      },
      computed: {
        textBtn() {
          return this.disabled ? `${this.remainingTime}秒後重新獲取` : '獲取驗證碼';
        }
      },
      methods: {
        async sendCode() {
          if (this.disabled) return;
          this.disabled = true;
          try {
            // 調用後端API發送驗證碼
            // 等待成功響應
            this.timer = setInterval(() => {
              this.remainingTime--;
              if (this.remainingTime === 0) {
                clearInterval(this.timer);
                this.disabled = false;
              }
            }, 1000);
          } catch (error) {
            // 出錯處理
            this.disabled = false;
          }
        }
      },
      destroyed() {
        clearInterval(this.timer);
      }
    }
  </script>

三、Vue短訊驗證碼倒計時

短訊驗證碼是應用程序中常用的驗證碼類型之一。與獲取驗證碼不同的是，短訊驗證碼是通過手機平台發送而非後端API。同樣，短訊驗證碼倒計時也需要在發送成功後啟動計時器。

前端代碼如下：

  <template>
    <button @click="sendCode()" :disabled="disabled">{{ textBtn }}</button>
  </template>

  <script>
    export default {
      data() {
        return {
          remainingTime: 60,
          timer: null,
          disabled: false
        }
      },
      computed: {
        textBtn() {
          return this.disabled ? `${this.remainingTime}秒後重新獲取` : '獲取短訊驗證碼';
        }
      },
      methods: {
        async sendCode() {
          if (this.disabled) return;
          this.disabled = true;
          try {
            // 調用手機平台API發送短訊驗證碼
            // 等待發送成功
            this.timer = setInterval(() => {
              this.remainingTime--;
              if (this.remainingTime === 0) {
                clearInterval(this.timer);
                this.disabled = false;
              }
            }, 1000);
          } catch (error) {
            // 出錯處理
            this.disabled = false;
          }
        }
      },
      destroyed() {
        clearInterval(this.timer);
      }
    }
  </script>

四、Vue實現驗證碼倒計時

實現驗證碼倒計時需要考慮到倒計時的場景和需要調用的API或函數。倒計時可以出現在多個地方，例如通過短訊驗證碼登錄、發送系統消息、重設密碼等。因此，在實現驗證碼倒計時時應該盡量通用，方便在各種場景中復用。

首先，在Vue組件中聲明一個計時器timer和一個剩餘時間remainingTime。計時器用於定時更新剩餘時間，剩餘時間初始值為60。同時，還需要聲明一個參數controlled，用於判斷倒計時是否被控制。

在計時器中，每秒減1，直到為0。如果倒計時被控制，可以通過觸發自定義事件來控制倒計時。在每次更新剩餘時間時，判斷剩餘時間是否為0，如果為0則停止計時器。

  <template>
    <button @click="refreshCode()" :disabled="disabled">{{ remainingTime }}</button>
  </template>

  <script>
    export default {
      props: {
        controlled: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
          remainingTime: 60,
          timer: null,
          disabled: true
        }
      },
      watch: {
        controlled(newVal) {
          if (newVal) clearInterval(this.timer);
          this.disabled = !newVal;
          this.remainingTime = 60;
        }
      },
      mounted() {
        if (!this.controlled) {
          this.timer = setInterval(() => {
            this.remainingTime--;
            if (this.remainingTime === 0) clearInterval(this.timer);
          }, 1000);
        }
      },
      methods: {
        refreshCode() {
          if (!this.controlled) return;
          this.$emit('refresh');
          clearInterval(this.timer);
          this.disabled = true;
          this.remainingTime = 60;
        }
      }
    }
  </script>

使用時，可以將controlled設置為true，並在父組件中監聽組件的refresh事件即可控制倒計時的開始和結束。代碼如下：

  <template>
    <div>
      <my-countdown :controlled="controlled" @refresh="resetCountdown" />
      <button @click="startCountdown">開始倒計時</button>
    </div>
  </template>

  <script>
    import MyCountdown from './MyCountdown.vue';

    export default {
      components: {
        MyCountdown
      },
      data() {
        return {
          controlled: false
        }
      },
      methods: {
        startCountdown() {
          this.controlled = true;
          setTimeout(() => {
            this.controlled = false;
          }, 5000);
        },
        resetCountdown() {
          this.controlled = false;
        }
      }
    }
  </script>

在上面的代碼中，通過點擊「開始倒計時」按鈕來控制倒計時的開始和結束。當按鈕被點擊時，將controlled設置為true，此時倒計時組件將不會自動開始計時器，直到監聽到了refresh事件，才會開始計數。5秒後我們又將controlled設置為false，此時組件又會變為自動計時的狀態。