前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue验证码发送倒计时

vue验证码发送倒计时

原创
作者头像
〆 千寻、
修改2020-03-06 18:34:42
1.1K0
修改2020-03-06 18:34:42
举报
文章被收录于专栏:技术分享文章
代码语言:javascript
复制
<template>
    <view>
        <view class="login-item">
            <input placeholder="请输入验证码" v-model="loginCode" name="input" class="login-code" maxlength="6" type="number"></input>
            <button class="login-getcode"  @click="getValCode" :disabled="disabled">{{codeTitle}}</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                disabled: false,
                codeTitle:'获取验证短信',
                loginCode:'',      //验证码
            };
        },methods:{
            //获取验证码
            getValCode(){
                let _this = this
                //这里写发送验证码接口
                loginApi.xxxxx({'phone':_this.telNumber}).then(res =>{
                    _this.tc.toast('验证码发送成功');
                })
                _this.disabled = true;
                _this.codeTitle = "请稍候...";
                setTimeout(() => {
                    _this.doLoop(60)
                }, 500)
            },
            //验证码倒计时
            doLoop: function(seconds) {
                let _this = this
                seconds = seconds ? seconds : 60;
                this.codeTitle = seconds + "s后获取";
                let countdown = setInterval(() => {
                    if (seconds > 0) {
                        _this.codeTitle = seconds + "s后获取"
                        --seconds;
                    } else {
                        _this.codeTitle = "获取验证码";
                        _this.disabled = false;
                        clearInterval(countdown);
                    }
                }, 1000);
            },
        }
    }
</script>

<style lang="less" scoped>

</style>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档