快捷導(dǎo)航

vue獲取驗(yàn)證碼倒計(jì)時(shí)組件

更新時(shí)間：2019年08月26日 11:06:09 作者：曹天驕

這篇文章主要為大家詳細(xì)介紹了vue獲取驗(yàn)證碼倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue獲取驗(yàn)證碼倒計(jì)時(shí)組件，供大家參考，具體內(nèi)容如下

之前寫(xiě)過(guò)一個(gè)計(jì)時(shí)函數(shù)，有計(jì)算誤差，但是驗(yàn)證碼的60秒倒計(jì)時(shí)可以忽略這一點(diǎn)點(diǎn)誤差。直接上代碼。

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

<script>
export default {
 data() {
 return {
  // 計(jì)時(shí)器,注意需要進(jìn)行銷毀
  timeCounter: null,
  // null 則顯示按鈕 秒數(shù)則顯示讀秒
  showtime: null
 }
 },
 methods: {
 // 倒計(jì)時(shí)顯示處理
 countDownText(s) {
  this.showtime = `${s}s后重新獲取`
 },
 // 倒計(jì)時(shí) 60秒 不需要很精準(zhǔn)
 countDown(times) {
  const self = this;
  // 時(shí)間間隔 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>

更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題：《倒計(jì)時(shí)功能》

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

rollup打包vue組件并發(fā)布到npm的方法
這篇文章主要介紹了rollup打包vue組件并發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程——table組件源碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Vue自定義元素身上的右鍵事件問(wèn)題
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue的生命周期一起來(lái)看看
這篇文章主要為大家詳細(xì)介紹了Vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
Vue瀑布流插件的使用示例
這篇文章主要介紹了Vue瀑布流插件的使用示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue專屬狀態(tài)管理庫(kù)Pinia的使用與實(shí)踐分享
在 Vue 的開(kāi)發(fā)中,狀態(tài)管理是一個(gè)不可或缺的部分,尤其是在復(fù)雜的應(yīng)用中,組件之間的狀態(tài)共享和管理變得至關(guān)重要,Pinia 作為 Vue 的專屬狀態(tài)管理庫(kù),本文將深入介紹 Pinia 的基礎(chǔ)知識(shí)、核心功能以及實(shí)際使用場(chǎng)景,需要的朋友可以參考下
2024-11-11
vue3中pinia的使用方法
Pinia是Vue3的狀態(tài)管理工具,安裝后在入口文件引入,定義store并在組件中使用,本文就來(lái)介紹一下vue3中pinia的使用方法,感興趣的可以了解一下
2024-10-10
LogicFlow內(nèi)置插件使用實(shí)例
這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總
這篇文章主要介紹了html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
Vue之beforeEach非登錄不能訪問(wèn)的實(shí)現(xiàn)（代碼親測(cè)）
這篇文章主要介紹了Vue之beforeEach非登錄不能訪問(wèn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07