這次帶給大家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 = '重新发送验证码'
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 = '重新发送验证码'
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實現倒數按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！
