vue实现短信验证码倒计时,vue怎么向手机发送验证码

　　本文主要介绍vue实现手机号和验证码登录(60s禁用倒计时)，帮助大家更好的理解和使用Vue。感兴趣的朋友可以了解一下。

　　最近在做一个Vue项目，前端通过我的手机号和验证码登录。要获取验证码按钮，我需要设置60s的倒计时(点击一次后，一分钟内不能再点击)。先看看效果图：

　　输入正确的手机号码格式后，点击“获取验证码”按钮即可；点击“获取验证码”后，按钮会进入60s倒计时，效果图如下：

　　效果图已经有了。接下来就上传代码吧！

　　超文本标记语言

　　El-button @ click= getCode():class= { disabled-style :getCodeBtnDisable } :disabled= getCodeBtnDisable { { codeBtnWord } }/El-button

　　数据

　　data() {

　　返回{

　　loginForm: {

　　电话号码： ，

　　验证码： ，

　　},

　　CodeBtnWord:获取验证码，//获取验证码按钮文本

　　WaitTime:61，//获取验证码按钮的过期时间

　　}

　　}

　　计算属性已计算

　　计算值：{

　　//用于检查手机号码格式是否正确。

　　phoneNumberStyle(){

　　让雷格=/^1[3456789]\d{9}$/

　　如果(！reg . test(this . loginform . phone number)){

　　返回false

　　}

　　返回true

　　},

　　//控制是否可以点击获取验证码按钮。

　　getCodeBtnDisable:{

　　get(){

　　if(this.waitTime==61){

　　if(this . loginform . phone number){

　　返回false

　　}

　　返回true

　　}

　　返回true

　　},

　　//注意：由于计算出来的属性本身没有设置方法，所以不支持在方法中修改，我接下来会这么做，所以需要手动添加。

　　set(){}

　　}

　　}

　　以上为计算属性添加集合的方法请参考//www . jb51 . net/article/202496 . htm。

　　当css不能被点击时，将其设置为灰色。el按钮. disabled-style {

　　背景色：# EEEEEE

　　颜色：# CCCCCC；

　　}

　　增加了在mots中获取验证码的方法

　　getCode(){

　　if(this.phoneNumberStyle){

　　设params={}

　　params . phone=this . loginform . phone number

　　//调用接口获取短信验证码。

　　axios.post(/sendMessage ，params)。然后(res={

　　res=res.data

　　if(res.status==200) {

　　这个。$message({

　　消息：“验证码已发送，请稍候.”,

　　类型：“成功”，

　　中心：正确

　　})

　　}

　　})

　　//因为下面用到了定时器，所以需要保存这个点。

　　让那个=这个

　　那个。等等-

　　that.getCodeBtnDisable=true

　　this . codebtnword=` $ { this . wait time } s，然后重新获取` s

　　设timer=setInterval(function(){

　　if(that.waitTime1){

　　那个。等等-

　　那个。codebtnword=` $ {that。等待时间} s，然后重新获取`

　　}否则{

　　清除时间间隔(定时器)

　　That.codeBtnWord=获取验证码

　　that.getCodeBtnDisable=false

　　that.waitTime=61

　　}

　　},1000)

　　}

　　}

　　通过上面的代码，可以实现。如有错误请指正！

　　以上是vue的手机号和验证码登录的详细信息(60s禁用倒计时)。更多关于Vue手机号验证码登录的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。