注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）

<template><el-button size="small" type="primary" :disabled="disabled" @click="getVerifyCode">{{ btnText }}</el-button>
</template><script type="text/ecmascript-6">
export default {data() {return {disabled: false,btnText: '获取验证码'}},methods: {getVerifyCode() {// 调用你项目获取手机验证码的API,假设返回Promise对象API.getSmsCode().then((res) => {// 将按钮设置为不可点击状态this.disabled = true// 60秒倒计时let time = 60let timer = setInterval(() => {if (time <= 0) {this.disabled = falsethis.btnText = '获取验证码'clearInterval(timer)} else {this.btnText = time + 's'time--}}, 1000)}).catch((err) => {console.log(err.message)this.disabled = false})}}
}
</script><style lang="stylus" rel="stylesheet/stylus"></style>

注：代码中的API.getSmsCode为自己项目中调取后端发送手机验证码API的方法，返回Promise对象，实际应用需要根据各自项目API设置修改。

注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）相关推荐

（短信服务）java SpringBoot 阿里云短信功能实现发送手机验证码
一.阿里云准备工作 1.阿里云短信服务-注册账号阿里云官网: https://www.aliyun.com/ 点击官网首页注册按钮. 2.阿里云短信服务-设置短信签名(阿里云提供测试的签名,暂时可以 ...
用Python模拟识别图片验证码并发送手机验证码
1.导语大家好,好久不见.又到每日分享Python小技能的时候了.最近因为疫情影响,所以更新内容比较慢-今天周一,就来更新一波,心血来潮,是时候上线经营了.其实也没想到有啥好分享的,不如分享一些干货 ...
java web 找回密码_java web实现忘记密码（找回密码）功能及代码
java web实现忘记密码(找回密码)功能及代码 (一).总体思路 (二).部分截图 (三).部分代码 (一).总体思路: 1.在找回密码页面录入姓名.邮箱和验证码,录入后点击[提交]按钮, ...
5.登录注册找回密码
登录注册找回密码登录登录方式有账号密码登录.扫码登录.手机验证登录和第三方登录. 手机登录,登录快捷方便,不用记住密码,但是必须有手机在身边. 账号密码登录,需要记住密码,容易遗忘,可以和手 ...
SpringBoot+vue 使用阿里云的短信功能发送手机验证码
前言: 小编后端用的是Springboot 前端用的是vue ,小编主要是写后台,前端页面比较简陋,后期还要调优,写的不对处还望多多包涵. 环境: 需要先准备好阿里云的账号和一些必要的参数.详情见我的 ...
手机验证码平台，怎么发送手机验证码，php开发手机验证码短信接口功能
通过前面的学习, 你已经掌握怎么在腾讯短信平台上设置项目, 添加短信签名, 设置短信模板, 把手机验证码注册页面写好. 今天子恒老师来跟你分享怎么实现发送手机验证码给用户, 注意我们使用的是php开发 ...
java实现发送手机验证码功能
1. 进入秒嘀科技(http://www.miaodiyun.com/),注册一个账号 2. 注册好之后,点击用户中心 -> 账户管理,就会进入如下界面 (顺便提一下,新注册的用户,平台会免费 ...
解决申请开发者office E5中无法发送手机验证码，reCaptcha加载失败
关于申请开发者office E5中无法发送手机验证码的解决方案文章目录关于申请开发者office E5中无法发送手机验证码的解决方案注册过程加载失败原因解决过程解决方案注册过程这是我的 ...
thinkphp实现发送手机验证码功能！
php实现发送手机验证码功能如下: //发送手机验证码public function sendPhoneCodeMessage(){ vendor('SendPhoneCode.SendCode',' ...

注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）

注册/找回密码等功能中发送手机验证码后倒计时效果的实现（基于vue）相关推荐

最新文章

热门文章