vue 发送短信倒计时

//先定义
//倒计时秒数countdown:60,//按钮上的文字codeMsg:'获取验证码',//定时器timer:null,

//函数
// 获取验证码getCode() {this.$refs.form.validateField('phone',(errMsg)=>{if(errMsg){return false}else {// 验证码60秒倒计时if (!this.timer) {this.$axios.post(urlGetSmsCode,{'name':this.ruleForm.phone}).then(res=>{if(res.code===200){this.setTime()this.$message.success(`发送成功`)}else{this.$message.error(res.msg)}}).catch(res=>{this.$message.error(res.data.message)})}}})},//倒计时setTime(){let _this = this;this.timer = setInterval(() => {if (_this.countdown > 0 && _this.countdown <= 60) {_this.countdown--;if (_this.countdown !== 0) {_this.codeMsg = "重新发送(" + _this.countdown + ")";} else {clearInterval(_this.timer);_this.codeMsg = "获取验证码";_this.countdown = 60;_this.timer = null;}}}, 1000)},

最后在用beforeDestroy函数去掉定时器

  beforeDestroy() {clearInterval(this.timer);this.timer = null;}

vue 发送短信倒计时相关推荐

html发送短信倒计时,js实现5秒倒计时重新发送短信功能
本文实例讲述了js实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: js-手机发送短信倒计时 button{ width: 100px; height: 30px; borde ...
案例：发送短信倒计时 js 手机60秒验证码
案例:发送短信倒计时点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信. 动图展示: 代码展示: <p>案例:发送短信倒计时</p> 手机号码: <input ...
使用js的方式设置点击按钮发送短信倒计时并且防止刷新
首先,放置一个按钮 <input type="button" id="btn" disabled="disabled" value=& ...
JS实现注册登录发送短信验证码动态显示60S倒计时完整案例
通常在web项目中都会遇到账户注册或者忘记密码时需要发送短信验证码的功能,虽然说这种功能很常见,但是实际开发过程中很多人还会遇到不少坑.笔者经过整理把最近项目中的用到的这个发送短信验证码动态显示60S ...
js开发实例 —— 发送短信验证码倒计时5S钟之后自动跳转页面
十九.发送短信验证码倒计时思路: ① 按钮点击之后,会禁用disabled为true. ② 同时按钮里面的内容会变化,注意button里面的内容通过innerHTML修改. ③ 里面秒数是有变化的, ...
快递单号查询、倒计时和发送短信效果
1.倒计时效果 <style> div { margin: 200px; } span { ...
java发送短信验证码带倒计时
分享一个完整的java发送短信验证码的完整实例,这是一个官方的使用demo,带有60秒倒计时功能. 效果: 我使用的是榛子云短信平台 , 官网地址:http://sms_developer.zhenz ...
789-792---BOM（定时器（setInterval() 定时器），案例：倒计时，停止setInterval() 定时器，案例：发送短信，this的指向）
文章目录 BOM 3 定时器 3.4 setInterval() 定时器案例:倒计时 3.5 停止setInterval() 定时器案例:发送短信 3.6 this BOM 3 定时器 3.4 s ...
魔方APP项目-05-注册功能实现，手机号唯一验证接口、客户端进行手机号验证、保存用户注册信息接口、客户端用户进行注册、使用云通讯发送短信，服务端实现发送短信验证码的api接口、客户端实现点击发送短信
用户模块注册功能实现 1.手机号码唯一验证接口在开发中,针对客户端提交的数据进行验证或提供模型数据转换格式成字典给客户端.可以使用Marshmallow模块来进行. 为了方便导包,所以我们设置当前 ...

vue 发送短信倒计时

vue 发送短信倒计时相关推荐

最新文章

热门文章