之前寫過一個計時函數，有計算誤差，但是驗證碼的60秒倒計時可以忽略這一點點誤差。直接上代碼。

<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>

總結

以上是生活随笔為你收集整理的vue 获取验证码倒计时组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。