更新记录

1.0.2（2025-05-14） 下载此版本

适配小程序

1.0.1（2025-05-14） 下载此版本

全面兼容vue3

1.0.0（2025-05-13） 下载此版本

实现vue2倒计时组件

平台兼容性

jia-countdown-verify 验证码倒计时按钮组件

一个用于发送短信验证码的倒计时按钮组件，支持自定义样式、倒计时时间和文本内容。适用于各种需要验证码功能的表单场景。

特性

• 支持自定义按钮样式（颜色、大小、圆角等）
• 支持自定义倒计时时间
• 支持自定义按钮文本
• 支持手动触发和自动开始倒计时
• 支持重置倒计时状态
• 提供多种事件回调（发送、倒计时变化、结束）
• 支持传递参数到事件回调中

安装方法

在 uni-app 插件市场中搜索 jia-countdown-verify 并导入到项目中。

基础用法

<template>
  <view>
    <jia-countdown-verify ref="countdownBtn" @send="onSend" />
  </view>
</template>

<script>
export default {
  methods: {
    onSend() {
      // 发送验证码逻辑
      // 成功后调用组件的 success 方法开始倒计时
      this.$refs.countdownBtn.success();
    }
  }
}
</script>

高级用法

使用 successVal 和 resetVal 控制倒计时

<template>
  <view>
    <input type="text" v-model="phone" placeholder="请输入手机号" />
    <jia-countdown-verify
      @send="sendCode"
      :successVal="successCount"
      :resetVal="resetCount"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      successCount: 0, // 成功计数器
      resetCount: 0, // 重置计数器
    };
  },
  methods: {
    sendCode() {
      // 验证手机号
      if (!/^1\d{10}$/.test(this.phone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        // 增加重置计数器触发重置
        this.resetCount++;
        return;
      }

      // 模拟API请求
      setTimeout(() => {
        // 发送成功，增加成功计数器触发倒计时
        this.successCount++;
      }, 1000);
    }
  }
}
</script>

API

Props

Events

Methods

使用示例

默认使用

<jia-countdown-verify ref="sms1" @send="onSend" />

默认为倒计时状态

<jia-countdown-verify :start="true" @send="onSend" />

设置圆角

<jia-countdown-verify :radius="'20rpx'" @send="onSend" />

设置颜色

<jia-countdown-verify
  color="#fff"
  background="#000"
  borderWidth="0"
  @send="onSend"
/>

设置大小

<jia-countdown-verify
  :width="'300rpx'"
  :height="'60rpx'"
  @send="onSend"
/>

设置秒数

<jia-countdown-verify :seconds="120" @send="onSend" />

改变倒计时状态下颜色

<jia-countdown-verify
  background="#02B653"
  borderWidth="0"
  color="#fff"
  @send="onSend"
  disabledColor="#999"
/>

设置文本

<jia-countdown-verify
  text="发送验证码短信"
  countdownText="秒后可重发"
  @send="onSend"
/>

注意事项

1. 当使用 ref 手动控制倒计时时，需要在发送验证码成功后调用 success() 方法开始倒计时
2. 当使用 successVal 和 resetVal 控制倒计时时，只需改变这两个值即可触发相应操作
3. 组件内部会在销毁时自动清除定时器，无需手动处理
4. 倒计时过程中按钮会自动禁用，防止重复点击