按钮倒计时功能-文档协议阅读倒计时

多喝点水吧

于 2024-08-07 16:30:20 发布

阅读量209

点赞数 2

分类专栏：前端笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_58665272/article/details/140994972

版权

前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

按钮倒计时结束恢复点击功能，用于页面中协议知晓倒计时等

以app为例，效果图:

页面代码：

<view>
	<button :disabled="countdown > 0" @click="agree" type="">{{ countdown > 0 ? `我已阅读${countdown}秒` : '同意' }}</button>
</view>

data声明：

data() {
		return {
		   countdown: 0, // 初始倒计时时间
		   timer: null, // 计时器
		}
},

倒计时代码：

methods: {
           // 倒计时
			time() {
				this.countdown = 10;
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown -= 1;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			},
}

可以在刚进入页面onShow()的时候触发一下time()倒计时方法，或者根据具体需要的业务场景触发