快捷導(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)容如下

之前寫過(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)文章

vue.js+Echarts開(kāi)發(fā)圖表放大縮小功能實(shí)例
本篇文章主要介紹了vue.js+Echarts開(kāi)發(fā)圖表放大縮小功能實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
vue組件中的數(shù)據(jù)傳遞方法
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
用Vue-cli搭建的項(xiàng)目中引入css報(bào)錯(cuò)的原因分析
本篇文章主要介紹了用Vue-cli搭建的項(xiàng)目中引入css報(bào)錯(cuò)的原因分析，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Vue報(bào)錯(cuò):TypeError:Cannot create property '
這篇文章主要介紹了Vue報(bào)錯(cuò):TypeError:Cannot create property 'xxx' on string 'xxxx'問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
詳解Vue源碼學(xué)習(xí)之雙向綁定
這篇文章主要介紹了Vue源碼學(xué)習(xí)之雙向綁定，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
前端vue實(shí)現(xiàn)甘特圖功能
dhtmlxGantt是一個(gè)強(qiáng)大的JavaScript Gantt圖表庫(kù),提供易于使用、高度可自定義的Gantt圖表組件,它支持多項(xiàng)任務(wù)和進(jìn)度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時(shí)間線和計(jì)劃表,本文給大家介紹前端vue實(shí)現(xiàn)甘特圖的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧
2024-04-04
vuejs 動(dòng)態(tài)添加input框的實(shí)例講解
今天小編就為大家分享一篇vuejs 動(dòng)態(tài)添加input框的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue 2 實(shí)現(xiàn)自定義組件一到多個(gè)v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時(shí)候我們需要對(duì)一個(gè)組件綁定自定義 v-model,以更方便地實(shí)現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實(shí)現(xiàn)自定義組件一到多個(gè)v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下
2024-07-07
React和Vue實(shí)現(xiàn)路由懶加載的示例代碼
路由懶加載是一項(xiàng)關(guān)鍵技術(shù),它可以幫助我們提高Web應(yīng)用的加載速度,本文主要介紹了React和Vue實(shí)現(xiàn)路由懶加載的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
vue地區(qū)選擇組件教程詳解
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國(guó)地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級(jí)聯(lián)動(dòng)，地區(qū)數(shù)據(jù)的添加和刪除,本文重點(diǎn)給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧
2018-05-05