当前位置: 首页 > article >正文

uniapp验证码

一、 页面结构

假设你有一个发送短信按钮,点击按钮时会触发发送短信并启动倒计时。

<template>
  <view>
    <button @click="sendSms" :disabled="isSending">{{ buttonText }}</button>
  </view>
</template>

二、脚本部分

在脚本中,定义一个倒计时的变量 time 和控制按钮状态的 isSending。

<script>
export default {
  data() {
    return {
      isSending: false, // 是否正在发送短信
      time: 60,         // 倒计时时间
      buttonText: '发送验证码' // 按钮文本
    };
  },
  methods: {
    // 发送短信的方法
    sendSms() {
      if (this.isSending) return; // 防止重复点击
      this.isSending = true;  // 设置为发送状态
      this.buttonText = `${this.time}s后重新获取`;

      // 启动倒计时
      const countdown = setInterval(() => {
        this.time--;
        this.buttonText = `${this.time}s后重新获取`;

        // 如果倒计时结束
        if (this.time <= 0) {
          clearInterval(countdown); // 清除定时器
          this.isSending = false;  // 恢复按钮
          this.time = 60;          // 重置倒计时
          this.buttonText = '发送验证码'; // 重置按钮文本
        }
      }, 1000);

      // 这里可以调用发送短信的接口
      // 假设发送短信成功后,继续倒计时
      // this.sendSmsApi();
    }
  }
};
</script>

三、样式部分(可选)

你可以为按钮和倒计时文本添加一些简单的样式,使其更直观。

<style scoped>
button {
  background-color: #007aff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
}

button:disabled {
  background-color: #b0b0b0;
}
</style>

说明:

isSending 控制按钮是否可点击,防止用户在倒计时期间重复点击。
time 用于记录倒计时的秒数,从 60 秒开始。
每秒通过 setInterval 更新按钮文本,并在倒计时结束时恢复原状态。
sendSms 方法负责触发发送短信和启动倒计时。

http://www.kler.cn/a/449263.html

相关文章:

  • 实践KDTS-WEB从mysql迁移到kingbasev9
  • Charles安装证书过程(手机)
  • 微信小程序UI自动化测试实践 !
  • 中地数码亮相2024武汉市数字经济应用场景对接大会
  • docker run 命令参数
  • 多功能护照阅读器港澳通行证阅读机RS232串口主动输出协议,支持和单片机/Linux对接使用
  • 数据库管理-第274期 Oracle Enterprise Manager 24ai新特性一览(20241223)
  • 使用frp进行内网穿透
  • 程控电阻箱应用中需要注意哪些安全事项?
  • Log4j简介
  • 在Excel中绘制ActiveX控件:解决文本编辑框定位问题
  • ubuntu装P104
  • 操作系统(22)外存的组织方式
  • 初识Go语言
  • docker部署微信小程序自动构建发布和更新
  • “电找车“ | 助力移动充电机器人快速落地
  • Could not resolve host: github.com
  • Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
  • 【氮化镓】p沟道GaN-on-Si晶体管的衬底偏置效应
  • 【习题答案】构建灵活高效的消息推送能力
  • c++---------流类
  • R机器学习:决策树算法的理解与实操
  • 【java设计模式】1 - 软件设计原则
  • springboot471基于协同过滤算法商品推荐系统(论文+源码)_kaic
  • Java的基础概念(一)
  • 微信 SDK 更新 Sample,NCF 文档和模板更新,更多更新日志,欢迎解锁