业务场景:点击按钮,然后按钮禁止,出现倒计时
直接上代码:
---html
<button
:disabled="abledBut"
@click="alipayWithdrawals">
提现
<text v-if="abledBut">({{setTimeNum}}s)</text>
</button>
---js
data() {
return {
abledBut: false, //是否禁止
setTimeNum: 10, // 倒计时时间
timeWrap: null, // 定时器标识
};
},
watch: {
/* 使用watch来响应数据的变化 */
//监听倒计时数据的变化,小于0的时候,清除定时器,解开按钮,重置倒计时
setTimeNum(newVal, oldVal) {
if(newVal < 0){
clearInterval(this.timeWrap)
this.abledBut = false
this.setTimeNum = 10
}
}
},
methods: {
//点击事件禁止按钮,触发定时器,每秒-1
alipayWithdrawals(){
if (this.setTimeNum > 0) {
this.abledBut = true
this.timeWrap = setInterval(() => {
this.setTimeNum -= 1
}, 1000)
}
}
}