Vue实现手机号、验证码登录(60s禁用倒计时)


Posted in Vue.js onDecember 19, 2020

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

Vue实现手机号、验证码登录(60s禁用倒计时)

输入正确格式的手机号码后,“获取验证码”按钮方可点击;点击“获取验证码”后,按钮进入60s倒计时,效果图如下:

Vue实现手机号、验证码登录(60s禁用倒计时)

Vue实现手机号、验证码登录(60s禁用倒计时)

 效果图已经有了,接下来就上代码吧!

  • html
<el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
  • 数据data
data() {
     return {
        loginForm: {
            phoneNumber: '',
            verificationCode: '',
        },
        codeBtnWord: '获取验证码', // 获取验证码按钮文字
        waitTime:61, // 获取验证码按钮失效时间
    }
}
  • 计算属性computed
computed: {
    // 用于校验手机号码格式是否正确
    phoneNumberStyle(){
        let reg = /^1[3456789]\d{9}$/
        if(!reg.test(this.loginForm.phoneNumber)){
            return false
        }
        return true
    },
    // 控制获取验证码按钮是否可点击
    getCodeBtnDisable:{
        get(){
            if(this.waitTime == 61){
                if(this.loginForm.phoneNumber){
                    return false
                }
                return true
            }
            return true
        },
        // 注意:因为计算属性本身没有set方法,不支持在方法中进行修改,而下面我要进行这个操作,所以需要手动添加
        set(){} 
    }
}

关于上面给计算属性添加set方法,可以参照//3water.com/article/202496.htm

  •  css设置不可点击时置灰
.el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
}
  • mothods中添加获取验证码方法
getCode(){
    if(this.phoneNumberStyle){
        let params = {}
        params.phone = this.loginForm.phoneNumber
        // 调用获取短信验证码接口
        axios.post('/sendMessage',params).then(res=>{
            res = res.data
            if(res.status==200) {
                this.$message({
                    message: '验证码已发送,请稍候...',
                    type: 'success',
                    center:true
                })
            }
        })
        // 因为下面用到了定时器,需要保存this指向
        let that = this
        that.waitTime--
        that.getCodeBtnDisable = true
        this.codeBtnWord = `${this.waitTime}s 后重新获取`
        let timer = setInterval(function(){
            if(that.waitTime>1){
                that.waitTime--
                that.codeBtnWord = `${that.waitTime}s 后重新获取`
            }else{
                clearInterval(timer)
                that.codeBtnWord = '获取验证码'
                that.getCodeBtnDisable = false
                that.waitTime = 61
            }
        },1000)
    }
}

通过上面的代码,就可以实现了,如有错误,敬请指正!

以上就是Vue实现手机号、验证码登录(60s禁用倒计时)的详细内容,更多关于vue 手机号验证码登录的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 #Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 #Vue.js
vue 通过base64实现图片下载功能
Dec 19 #Vue.js
Vue中computed和watch有哪些区别
Dec 19 #Vue.js
Vue与React的区别和优势对比
Dec 18 #Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 #Vue.js
You might like
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
jQuery实现菜单栏导航效果
2017/08/15 jQuery
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
python选择排序算法的实现代码
2013/11/21 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
实习心得体会
2014/01/02 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
预备党员半年考察意见
2015/06/01 职场文书
爱国主义电影观后感
2015/06/18 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
python中os.path.join()函数实例用法
2021/05/26 Python