<template> <div class="captcha-row">  <input class="captcha-input" placeholder="輸入驗證碼" auto-focus />  <div v-if="showtime===null" class="captcha-button" @click="send">   獲取驗證碼  </div>  <div v-else class="captcha-button">   {{showtime}}  </div> </div></template>

<script>export default { data() {  return {   // 計時器,注意需要進行銷毀   timeCounter: null,   // null 則顯示按鈕 秒數則顯示讀秒   showtime: null  } }, methods: {  // 倒計時顯示處理  countDownText(s) {   this.showtime = `${s}s后重新獲取`  },  // 倒計時 60秒 不需要很精準  countDown(times) {   const self = this;   // 時間間隔 1秒   const interval = 1000;   let count = 0;   self.timeCounter = setTimeout(countDownStart, interval);   function countDownStart() {    if (self.timeCounter == null) {     return false;    }    count++    self.countDownText(times - count + 1);    if (count > times) {     clearTimeout(self.timeCounter)     self.showtime = null;    } else {     self.timeCounter = setTimeout(countDownStart, interval)    }   }  },  send() {   this.countDown(60);  } },}</script>

<style lang="less" scoped>.captcha-row { display: flex; .captcha-button {  background: #048fff;  color: white;  display: flex;  justify-content: center;  align-items: center;  padding: 4rpx 8rpx;  width: 320rpx;  border-radius: 4rpx; }}</style>