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生命周期的深入理解
Dec 03 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
服务器web工具 php环境下
2010/12/29 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
jquery 上下滚动广告
2009/06/17 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python交换两个变量的值方法
2019/01/12 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
Python类中self参数用法详解
2020/02/13 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
.NET笔试题(20个问题)
2016/02/02 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
卫生巾广告词
2014/03/18 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
庆祝儿童节标语
2014/10/09 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
《女娲补天》教学反思
2016/02/20 职场文书