Vue实现短信按钮倒计时

业务场景：点击按钮，然后按钮禁止，出现倒计时
直接上代码：

---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)
		}
	}
}