vue实现按钮倒计时

按钮倒计时,倒计时结束可以点击vue实现

<button @click="handle" :disabled="readBtn.disabled">{{ readBtn.text }}</button>

data(){
    return{
        readBtn: {
                time: 5,
                disabled: true,
                text: '我已阅读并同意(5秒)'
            }
     }
}
methods:{
    initRead() {
            let timer = null
            if (this.readBtn.time) {
                this.readBtn.text = `我已阅(${this.readBtn.time}秒)`
                this.readBtn.time--
                timer = setTimeout(() => {
                    this.initRead()
                }, 1000)
            } else {
                this.readBtn.disabled = false
                this.readBtn.text = '我已阅'
                clearTimeout(timer)
            }
        }    
}    

 

posted @ 2023-02-08 15:51  方小川  阅读(959)  评论(0编辑  收藏  举报