在項(xiàng)目開發(fā)里，我們經(jīng)常會遇到發(fā)送驗(yàn)證碼、點(diǎn)擊了之后有60秒倒計(jì)時的按鈕,下面就看一下代碼如何寫？

<el-button @click="getCountdown" :disabled="totalTime <60">{{content}}</el-button>
            
export default {
    data() {
        return {
            totalTime: 60,
            content: "發(fā)送驗(yàn)證碼"
        }
    },
    methods: {
        getCountdown() {
            let clock =  window.setInterval(() => {
                this.content = this. totalTime + 's后重新發(fā)送';
                this.totalTime --;
                if(this. totalTime < 0){
                    this. totalTime = 60;
                    this.content = "重新發(fā)送驗(yàn)證碼";
                    window.clearInterval(clock);
                }
            }, 1000);
        }
    },
}

在data里分別用content和totalTime來記錄內(nèi)容和時間減1的操作，在countDown函數(shù)里我們用了setInterval定時器，每隔一秒totalTime減1，同時更改按鈕里顯示的內(nèi)容。在window.setInterval里用了箭頭函數(shù)，因?yàn)樗鼤詣咏壎ㄍ饷娴膖his，所以就不用先存下this了

如圖所示：

image.png

image.png

image.png

設(shè)置button 的disabled是為了防止多次點(diǎn)擊出現(xiàn)倒計(jì)時速度變快的問題。