前言
在vue中开发中，关于计时器的使用也是比较常见的知识点，如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求，很常见的需求也不复杂，主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法，方便查阅使用，如有问题请指正。
使用场景
在前端开发中基于移动端的短信验证码发送60s倒计时使用，用户协议阅读30s倒计时提示等等。
核心原理
主要要处理的是倒计时按钮提示的数字以及倒计时结束之后的提示文字，以及计时器来进行倒计时使用，以及标签层面和js中按钮触发的点击事件处理。
示例实现代码
本篇博文以用户协议阅读提示30s倒计时提示来讲解，具体的核心代码如下所示。
1、标签里面的代码
<!-- 提示框-->
<van-dialog
class="instruction-dialog" v-model="instructionShow"
title=“用户协议须知" confirm-button-color="#ee0a24"
:showConfirmButton="false" >
<div class="instruction-dialog-content">
协议提示内容
</div>
<div class="dialog-button-bg">
<div v-if="totalTime > 0"
style="margin-top: 10px; width: 50%;margin-bottom: 10px;display: inline-block;
height: 34px;vertical-align: middle;line-height: 34px;background: rgb(143, 142, 142);
color: white; border-radius: 4px;font-size: 14px;">
{{ confirmContent }}
</div>
<van-button
v-else
type="info"
style=" width: 50%;height: 34px;margin-bottom: 10px; margin-top: 10px; border-radius: 4px; "
@click="closeClick1"
>关闭</van-button
>
</div>
</van-dialog>2、js中的代码
data() {
return {
confirmContent: "确认", //倒计时之后按钮提示文字
totalTime: 30, //倒计时30s
}
},
mounted() {
this.verificationCode(); //进入当前界面就需要调用倒计时方法
}
//…此处省略无关代码
methods: {
//倒计时方法
verificationCode() {
this.confirmContent = this.totalTime + "s后可关闭";
let clock = window.setInterval(() => {
this.totalTime--;
this.confirmContent = this.totalTime + "s后可关闭";
if (this.totalTime <= 0) {
clearInterval(clock);
}
}, 1000);
},
//提示框关闭按钮
closeClick1() {
this.instructionShow = false;
},
}3、css样式里面的代码
<style scoped>
/**弹框 */
.instruction-dialog {
margin-top: 10px;
margin-bottom: 15px;
height: 80%;
}
.instruction-dialog-content {
color: #323232;
padding: 15px;
font-size: 11px;
}
.dialog-button-bg {
background: white;
text-align: center;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>基于前端的手机验证码倒计时的实现和上面的用户协议阅读提示30s倒计时提示的示例实现类似，这里就不再做示例介绍。
最后
通过上面介绍的在vue中实现倒计时功能，在Vue.js开发中遇到相关使用场景就游刃有余了，这也是在开发过程中必用的功能，尤其是对于初中级开发者来说，更应该掌握这些情况的使用，这里不再赘述。以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
