发送短信验证码,60秒倒计时重发

简介: 发送短信验证码,60秒倒计时重发

<template>
    <el-input size="small" placeholder="请输入验证码" v-model="phoneCode">
        <el-button  :disabled="disSend" size="small" slot="append" @click="send">{{BtnName}}</el-button>
    </el-input>
</template>
 
<script>
    export default {
        data() {
            return {
                phoneCode: '',
                BtnName: '发送验证码',
                disSend:false
            }
        },
        methods: {
            send() {
                this.disSend = true
                this.$alert('已向手机号13908056224发送短信', '温馨提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        let count = 60;
                        let timer = null
                        if (!timer) {
                            timer = setInterval(() => {
                                if (count > 1) {
                                    count--;
                                    this.BtnName = count + '秒后重发'
                                } else {
                                    clearInterval(timer);
                                    timer = null;
                                    this.disSend = false
                                    this.BtnName = '发送验证码'
                                }
                            }, 1000)
                        }
                    }
                });
            }
        }
    }
</script>
目录
相关文章
验证码倒计时的注册页面
验证码倒计时的注册页面
47 0
layui框架实战案例(10):短信验证码60秒倒计时
layui框架实战案例(10):短信验证码60秒倒计时
313 0
|
2月前
|
Windows
Axure原型设计:获取验证码倒计时效果的实现
本文介绍了使用Axure 9.0在Windows或Mac电脑上设计手机号登录页面的步骤,包括前期准备和详细教程。前期准备涉及软件、硬件及逻辑梳理。教程涵盖绘制登录页面、创建动态面板实现倒计时效果,以及设置按钮交互。通过这些步骤,实现输入手机号后点击获取验证码的禁用状态与倒计时显示功能。鼓励读者思考其他实现方法,提升Axure使用技巧。
|
2月前
Axure原型设计:制作验证码倒计时,并重新获取交互效果
本文详细介绍了在Axure中实现验证码倒计时交互效果的步骤,包括元件准备、布局美化、全局变量设置及交互效果配置。通过分解交互流程,利用全局变量控制倒计时逻辑,最终实现按钮从“获取验证码”到倒计时状态的自动切换,并可重复使用。
|
3月前
|
NoSQL Java Redis
认证服务---整合短信验证码,验证码倒计时,验证码防刷校验 【一】
这篇文章介绍了如何在分布式微服务项目中整合短信验证码服务,包括使用阿里云短信验证接口、将短信验证功能集成到第三方服务中、其他服务的远程调用,以及通过Redis实现验证码防刷机制的代码实现和遇到的问题解决方案。
|
6月前
|
NoSQL 安全 前端开发
验证码倒计时:用户界面的小细节,大智慧
本文深入探讨了验证码倒计时的设计和实现,一项看似简单但对用户体验影响深远的功能。我们将讨论为什么需要倒计时,如何在不同平台(如Web和移动应用)上实现它,以及如何确保它既用户友好又安全。无论你是前端新手还是资深开发者,理解验证码倒计时的原理和最佳实践都将有助于你创建更流畅、更安全的用户界面。
218 3
|
JavaScript API 容器
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
手机短信验证码登录功能的开发实录(机器识别码、短信限流、错误提示、发送验证码倒计时60秒)
295 1
|
Android开发
Android 短信验证码倒计时60s实现步骤
Android 短信验证码倒计时60s实现步骤
216 0
|
小程序 JavaScript
微信小程序登录与注册验证码倒计时的效果实现
微信小程序登录与注册验证码倒计时的效果实现
298 0
|
Java 数据安全/隐私保护 Windows
【Java实验五】字符串加密、模拟用户登录、生成验证码、春节倒计时等
1、实验题目:字符串加密 键盘输入一个原始字符串作为明文,然后使用加密方法加密,再对加密字符串进行解密。样例如下图,加密方法自定,完成其功能并测试。
154 0