欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

千鋒扣丁學(xué)堂HTML5培訓(xùn)之vue獲取驗(yàn)證碼倒計(jì)時(shí)組件

2019-08-26 13:41:38 4092瀏覽

今天千鋒扣丁學(xué)堂HTML5培訓(xùn)老師給大家分享一篇關(guān)于vue獲取驗(yàn)證碼倒計(jì)時(shí)組件的詳細(xì)介紹，下面我們一起來(lái)看一下吧。

<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)于千鋒扣丁學(xué)堂HTML5培訓(xùn)之vue獲取驗(yàn)證碼倒計(jì)時(shí)組件的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢。想要學(xué)好HTML5開(kāi)發(fā)小編給大家推薦口碑良好的扣丁學(xué)堂，扣丁學(xué)堂有專業(yè)老師制定的HTML5學(xué)習(xí)路線圖輔助學(xué)員學(xué)習(xí)，此外還有與時(shí)俱進(jìn)的HTML5課程體系和HTML5視頻教程供大家學(xué)習(xí)，想要學(xué)好HTML5開(kāi)發(fā)技術(shù)的小伙伴快快行動(dòng)吧?？鄱W(xué)堂H5技術(shù)交流群：673883249。

                             

     【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】        【掃碼進(jìn)入HTML5前端開(kāi)發(fā)VIP免費(fèi)公開(kāi)課】  

查看更多關(guān)于“HTML5開(kāi)發(fā)技術(shù)資訊”的相關(guān)文章>>