Vue做出倒數按鈕效果

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

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

完成的效果如下：

 

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

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

<button>
 {{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 <p style="text-align: left;">上面的程式碼解決了60不見的問題，同時當totalTime小於0時清除同時器、重新設定按鈕裡的content、將totalTime重設為60以便下次使用。 </p><p style="text-align: left;">倒數10秒的效果：</p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/002/4dbad1fb7b081b3ae6cbbb669ef78067-2.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p><p   style="max-width:90%">發現bug，多次點擊之後，倒講時速度變快，這是因為每次點擊都會啟動一個setInterval，這些setInterval都會減少totalTime。解決的方法也很簡單：簡單節流一下就好了，就是第一次點擊按鈕之後讓countDonw這個函數的程式碼不可執行，等到倒數結束之後才可以再執行。 </p><pre class="brush:php;toolbar:false">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 <p style="text-align: left;">在data裡加入canClick，預設是true，如果canClick為true，countDown裡的程式碼可以執行，如果是false就不行。每執行一次就將canClick設為false，而只在倒數結束的時候再改為true。這樣剛才的問題就沒有了。 </p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/002/ae1f1330cc41f7832e4354f02d035f4d-3.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""> </p><p   style="max-width:90%">到這裡其實就差不多了，但還可以調整下樣式：</p><pre class="brush:php;toolbar:false"><button>
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠标变化
}</button>

效果：

 

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

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

推薦閱讀：

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

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

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