在項目開發里，我們經常會遇到發送驗證碼、點擊了之后有60秒倒計時的按鈕，很常見卻也很簡單，但是在寫這個按鈕的時候有個別地方還要注意下，今天寫出來，如有問題歡迎指正！
完成的效果如下：
為了更快顯示出效果，我把時間設成了5秒。按鈕在點擊之后會出現倒計時，同時按鈕變為不可點擊狀態，樣式也發生變化，鼠標懸浮上的樣子也會發生變化。
接下來我們用代碼來實現：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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函數來解決這些問題。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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這個函數的代碼不可執行，等到倒計時結束之后才可以再次執行。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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; // 鼠標變化 }
效果：
來源：https://www.jb51.net/article/138555.htm
另一種方式，通過v-show來展示
div class="login_list"> <span class="login_title">短信驗證碼：</span> <input class="auth_input" type="text" placeholder="輸入驗證碼" /> /*上面兩行可忽略*/ /* * 下面兩行是本次重點，通過v-show來控制該顯示哪一行 * 首先顯示.auth_text_blue 通過點擊事件getAuthCode來獲取手機驗證碼。 * 同時改變sendAuthCode的值，隱藏自身，顯示倒計時.auth_text * */ <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">獲取驗證碼</span> <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之重新發送驗證碼</span> </div>
var vm = new Vue({ el: ".vueBox", data: { sendAuthCode:true,/*布爾值，通過v-show控制顯示‘獲取按鈕’還是‘倒計時’ */ auth_time: 0, /*倒計時 計數器*/ }, methods: { getAuthCode:function () { this.sendAuthCode = false; this.auth_time = 6; var auth_timetimer = setInterval(()=>{ this.auth_time--; if(this.auth_time<=0){ this.sendAuthCode = true; clearInterval(auth_timetimer); } }, 1000); } } });