倒计时60s?(vue)

最新推荐文章于 2024-06-07 16:03:32 发布

weixin_43677787

最新推荐文章于 2024-06-07 16:03:32 发布

阅读量256

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43677787/article/details/127693691

版权

<el-button :disable=“disbaled” @click="onClick">{{ btnText }}</el-button>

// js
data () {
	return {
		btnText: '点击',
		disabled: false, // 不禁用
		oneMinutes: 0, // 倒计时
		timer: null, // 
	}
},
methods: {
	onClick () {
		this.oneMinutes = 60;
		this.disabled = true;
		this.timer = setInterval(() => {
			this.btnText = `${this.oneMinutes}s`;
			this.oneMinutes--;
			if (this.oneMinutes <= 0) {
				this.btnText = '点击';
				this.oneMinutes = 60;
				this.disabled = false;
				clearInterval(this.tiemr);
			}
		}, 1000)
	}
}