Vue做出倒數按鈕效果

這次帶給大家Vue做出倒數按鈕效果，Vue做出倒數按鈕效果的注意事項有哪些，以下就是實戰案例，一起來看一下。

在專案開發裡，我們常常會遇到發送驗證碼、點擊了之後有60秒倒數計時的按鈕，很常見卻也很簡單，但是在寫這個按鈕的時候有個別地方還要注意下，今天就寫出來，如有問題歡迎指正！

完成的效果如下：

 

為了更快顯示出效果，我把時間設為了5秒。按鈕在點擊之後會出現倒數計時，同時按鈕變成不可點擊狀態，樣式也會發生變化，滑鼠懸浮上的樣子也會改變。

接下來我們用程式碼來實現：

<button class="button" @click="countDown">
 {{content}}
</button>
...
data () {
  return {
   content: '发送验证码',  // 按钮里显示的内容
   totalTime: 60      //记录具体倒计时时间
  }
},
methods: {
  countDown() {
    let clock = window.setInterval(() => {
      this.total--
      this.content = this.total + 's后重新发送'
    },1000)
  }
}

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

效果如下圖：

 

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

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

接下來需要繼續完善countDown函數來解決這些問題。

countDown () {
 this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime < 0) {     //当倒计时小于0时清除定时器
    window.clearInterval(clock)
    this.content = &#39;重新发送验证码&#39;
    this.totalTime = 60
    }
 },1000)
},

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

倒數10秒的效果：

 

發現bug，多次點擊之後，倒講時速度變快，這是因為每次點擊都會啟動一個setInterval，這些setInterval都會減少totalTime。解決的方法也很簡單：簡單節流一下就好了，就是第一次點擊按鈕之後讓countDonw這個函數的程式碼不可執行，等到倒數結束之後才可以再執行。

data () {
  return {
   content: '发送验证码',
   totalTime: 10,
   canClick: true //添加canClick
  }
}
...
countDown () {
 if (!this.canClick) return  //改动的是这两行代码
 this.canClick = false
 this.content = this.totalTime + 's后重新发送'
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新发送'
  if (this.totalTime < 0) {
   window.clearInterval(clock)
   this.content = &#39;重新发送验证码&#39;
   this.totalTime = 10
   this.canClick = true  //这里重新开启
  }
 },1000)
}

在data裡加入canClick，預設是true，如果canClick為true，countDown裡的程式碼可以執行，如果是false就不行。每執行一次就將canClick設為false，而只在倒數結束的時候再改為true。這樣剛才的問題就沒有了。

 

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

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

效果：

 

#這個倒數按鈕十分簡單，但是我第一次寫的時候還是寫的很亂，而且那時候還不知道函數節流的概念。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue.js element-ui做出選單樹狀結構

##如何使用JS取得用戶所在城市及地理位置

以上是Vue做出倒數按鈕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！