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

完成的效果如下：

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

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

<button class="button" @click="countDown"> {{content}}</button>...data () {  return {   content: '發(fā)送驗(yàn)證碼',  // 按鈕里顯示的內(nèi)容   totalTime: 60      //記錄具體倒計(jì)時(shí)時(shí)間  }},methods: {  countDown() {    let clock = window.setInterval(() => {      this.total--      this.content = this.total + 's后重新發(fā)送'    },1000)  }}

在data里加了兩條數(shù)據(jù)，一條用來記錄時(shí)間，一條用來盛放倒計(jì)時(shí)按鈕的具體內(nèi)容。在countDown函數(shù)里我們用了setInterval定時(shí)器，每隔一秒totalTime減1，同時(shí)更改按鈕里顯示的內(nèi)容。 在window.setInterval里用了箭頭函數(shù)，因?yàn)樗鼤詣咏壎ㄍ饷娴膖his，所以就不用先存下this了。

效果如下圖：

但是這個(gè)按鈕還有一些問題：

點(diǎn)擊了按鈕之后過了1秒就直接從59秒開始倒計(jì)時(shí)了，中間的60不見了
倒計(jì)時(shí)的時(shí)候還可以點(diǎn)擊
還沒有清除倒計(jì)時(shí)

接下來需要繼續(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) {     //當(dāng)?shù)褂?jì)時(shí)小于0時(shí)清除定時(shí)器    window.clearInterval(clock)    this.content = '重新發(fā)送驗(yàn)證碼'    this.totalTime = 60    } },1000)},

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

倒計(jì)10秒的效果：

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

data () {  return {   content: '發(fā)送驗(yàn)證碼',   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ā)送驗(yàn)證碼'   this.totalTime = 10   this.canClick = true  //這里重新開啟  } },1000)}

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

到這里其實(shí)就差不多了，不過還可以調(diào)整下樣式：

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

效果：

這個(gè)倒計(jì)時(shí)按鈕十分簡單，但是我第一次寫的時(shí)候還是寫的很亂，而且那個(gè)時(shí)候還不知道函數(shù)節(jié)流的概念。

總結(jié)

以上所述是小編給大家介紹的Vue寫一個(gè)簡單的倒計(jì)時(shí)按鈕功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！