Vue寫一個簡單的倒計時按鈕功能

更新時間：2018年04月20日 10:58:30 作者：limingru

這篇文章主要介紹了基于Vue寫一個簡單的倒計時按鈕功能，在項目開發(fā)的過程，經(jīng)常會遇到發(fā)送驗證碼，點擊之后有60秒倒計時的按鈕，今天小編就給大家分享實例代碼，需要的朋友參考下吧

在項目開發(fā)里，我們經(jīng)常會遇到發(fā)送驗證碼、點擊了之后有60秒倒計時的按鈕，很常見卻也很簡單，但是在寫這個按鈕的時候有個別地方還要注意下，今天寫出來，如有問題歡迎指正！

完成的效果如下：

為了更快顯示出效果，我把時間設成了5秒。按鈕在點擊之后會出現(xiàn)倒計時，同時按鈕變?yōu)椴豢牲c擊狀態(tài)，樣式也發(fā)生變化，鼠標懸浮上的樣子也會發(fā)生變化。

接下來我們用代碼來實現(xiàn)：

<button class="button" @click="countDown">
 {{content}}
</button>

...

data () {
  return {
   content: '發(fā)送驗證碼',  // 按鈕里顯示的內容
   totalTime: 60      //記錄具體倒計時時間
  }
},
methods: {
  countDown() {
    let clock = window.setInterval(() => {
      this.total--
      this.content = this.total + 's后重新發(fā)送'
    },1000)
  }
}

在data里加了兩條數(shù)據(jù)，一條用來記錄時間，一條用來盛放倒計時按鈕的具體內容。在countDown函數(shù)里我們用了setInterval定時器，每隔一秒totalTime減1，同時更改按鈕里顯示的內容。在window.setInterval里用了箭頭函數(shù)，因為它會自動綁定外面的this，所以就不用先存下this了。

效果如下圖：

但是這個按鈕還有一些問題：

點擊了按鈕之后過了1秒就直接從59秒開始倒計時了，中間的60不見了
倒計時的時候還可以點擊
還沒有清除倒計時

接下來需要繼續(xù)完善countDown函數(shù)來解決這些問題。

countDown () {
 this.content = this.totalTime + 's后重新發(fā)送' //這里解決60秒不見了的問題
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新發(fā)送'
  if (this.totalTime < 0) {     //當?shù)褂嫊r小于0時清除定時器
    window.clearInterval(clock)
    this.content = '重新發(fā)送驗證碼'
    this.totalTime = 60
    }
 },1000)
},

上面的代碼解決了60不見的問題，同時當totalTime小于0時清除同時器、重新設置按鈕里的content、將totalTime重置為60以便下次使用。

倒計10秒的效果：

發(fā)現(xiàn)bug，多次點擊之后，倒講時速度變快，這是因為每次點擊都會啟動一個setInterval，這些setInterval都會減少totalTime。解決的方法也很簡單：簡單節(jié)流一下就好了，就是第一次點擊按鈕之后讓countDonw這個函數(shù)的代碼不可執(zhí)行，等到倒計時結束之后才可以再次執(zhí)行。

data () {
  return {
   content: '發(fā)送驗證碼',
   totalTime: 10,
   canClick: true //添加canClick
  }
}

...

countDown () {
 if (!this.canClick) return  //改動的是這兩行代碼
 this.canClick = false
 this.content = this.totalTime + 's后重新發(fā)送'
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新發(fā)送'
  if (this.totalTime < 0) {
   window.clearInterval(clock)
   this.content = '重新發(fā)送驗證碼'
   this.totalTime = 10
   this.canClick = true  //這里重新開啟
  }
 },1000)
}

在data里添加canClick，默認是true，如果canClick為true，countDown里的代碼可以執(zhí)行，如果是false就不行。每執(zhí)行一次就將canClick設為false，而只在倒計時結束的時候再改為true。這樣剛才的問題就沒有了。

到這里其實就差不多了，不過還可以調整下樣式：

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠標變化
}

效果：