Vue 获取验证码60s倒计时方法

HTML：

<div class="item"><input type="text" v-model="phone" placeholder="请输入手机号">
</div>
<div class="item phone-code"><input type="text fl"  v-model="phone_sms_valid_code" placeholder="请输入手机验证码"><button class="btn fr"  @click="countDown">{{content}}</button>
</div>

js:

export default {data() {return {content: '获取验证码',totalTime: 60,canClick: true, //添加canClickphone:'',}},methods: {countDown() {//获取验证码if(!this.canClick) return;if(!this.phone){alert("请输入手机号");return false;}if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {alert("请输入正确的手机号");return false;}this.$axios.get('/act/sms/' + this.phone).then((res) => {if(res.success) {this.canClick = falsethis.content = this.totalTime + 's后重新发送';let timer = window.setInterval(() => {this.totalTime--this.content = this.totalTime + 's后重新发送';if(this.totalTime < 0) {window.clearInterval(timer);this.content = '重新发送验证码'this.totalTime = 60this.canClick = true //这里重新开启}}, 1000);} else {alert(res.msg);}})},}
}

Vue 获取验证码60s倒计时方法相关推荐

实用技巧——获取验证码的倒计时
实用技巧--获取验证码的倒计时效果图源码:GitHub CountDownTimer 创建对象,调用start的方法,开始倒计时 /*** 第一个参数:总时长(毫秒)* 第二个参数:多久执行一次回 ...
vue 获取验证码倒计时组件
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template><div class="captcha-row" ...
ElementUI+VUE获取验证码前端代码
本期带来vue项目的获取验证码按钮以及一个定时任务可以和我上期发的SpringBoot项目发现验证码一起配合使用 vue + elementUI项目使用 1.首先是前端的方法部分 send () { ...
Java中IDEA，Springboot实现手机获取验证码和倒计时
问题一:我现在点击获取手机验证码,虽然现实正在发送但是手机接收不到验证码我试了很多也不知道哪的问题我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com 已 ...
倒计时到0停止，用在手机获取验证码的倒计时
<input type="text" placeholder="填写验证码" class="check1 "/><butt ...
Android实现获取验证码的倒计时功能
开发中经常会遇到获取短信验证码,获取验证码后需要等待1分钟倒计时,这段时间是不能再次发送短信请求的. 实现如下: CountDownTimerUtils.java package com.zhw.my ...
uni-app实现获取验证码的倒计时
实现的效果页面部分是一个三目运算,codeTime是倒计时的时间. <template><view><view class="three">& ...
vue获取元素高度的方法
vue获取元素的高度 <divref="getHeight"class="block"/> .block {width: 100px;height: ...
vue 获取验证码按钮，点击后开始倒计时
第一步 data() {return {disableCode: false,getCode: this.$t('login.obtaining'), // 按钮显示的内容isGeting: fals ...

Vue 获取验证码60s倒计时方法

Vue 获取验证码60s倒计时方法相关推荐

最新文章

热门文章