基本实现效果
按钮:
<t-button @click="handleSend" :disabled="disable">{{text}}</t-button>
data:
text: '发送验证码', time: 10, timer: null, disable: false
点击发送:
handleSend() { this.disable = true this.text = this.time + 's后重新发送' this.timer = setInterval(() => { if (this.time > 0) { this.time-- this.text = this.time + 's后重新发送' } else { clearInterval(this.timer) this.time = 10 this.disable = false this.text = '重新发送' } }, 1000) }
防止刷新
handleSend() { this.disable = true this.text = this.time + 's后重新发送' this.timer = setInterval(() => { if (this.time > 0) { this.time-- this.text = this.time + 's后重新发送' localStorage.setItem('time', this.time) // 注意这行 } else { clearInterval(this.timer) this.time = 10 this.disable = false this.text = '重新发送' } }, 1000) }
created() { const time = localStorage.getItem('time') if (time && time > 0) { this.text = time + 's后重新发送' this.time = time this.handleSend() } }