uniapp验证码

一、 页面结构

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

bash 复制代码
<template>
  <view>
    <button @click="sendSms" :disabled="isSending">{{ buttonText }}</button>
  </view>
</template>

二、脚本部分

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

bash 复制代码
<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>

三、样式部分(可选)

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

bash 复制代码
<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 方法负责触发发送短信和启动倒计时。
相关推荐
CHB5 小时前
uni-ai:让你的App快速接入AI
uni-app·deepseek
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode