Vue.js如何实现验证码倒计时?来这里看看
- 首先验证码倒计时是基本上所有需要登录得页面或程序所需要的。
- 验证码倒计时得实现其实就是通过计时器,不断地调用当前方法对所设置得倒计时总数进行 - -。
代码如下:
页面使用
<div prop="password" style="margin: 30px 0;position: relative;height: 40px;">
<el-input placeholder="验证码" v-model="password" ></el-input>
<label v-if="codeShow" @click="yanzhen()" type="text" style="position: absolute;top:9px !important;right: 10px;border: none;color: #4ACCD4 !important;background-color: none;">获取验证码</label>
<label v-if="!codeShow" @click="messagey" type="text" style="position: absolute;top:9px !important;right: 10px;border: none;color: #4ACCD4 !important;background-color: none;cursor: pointer;">{{count}}后获取</label>
</div>
--------------------------------------
JS
data() {
return {
// 数据绑定
phone: '',
password: '',
codeShow: true, //判断显示隐藏
count: '', //显示时的文字内容
timer: null,//计时器
}
},
methods: {
getcode(){
const TIME_COUNT = 60; //倒计时60秒
if (!this.timer) {
this.count = TIME_COUNT;
this.codeShow = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.codeShow = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);//每秒执行一次,这里的1000指的是1000毫秒
}
}
这就是一个简单通用得验证码倒计时,实测可用!如何帮到你了希望你可以点个赞或者关注奥~ 谢谢