# uniapp-countdown-verify

**Repository Path**: childe-jia/uniapp-countdown-verify

## Basic Information

- **Project Name**: uniapp-countdown-verify
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-14
- **Last Updated**: 2025-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

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

## 特性

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

## 安装方法

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

## 基础用法

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

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

## 高级用法

### 使用 successVal 和 resetVal 控制倒计时

```vue
<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

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| text | String | "发送验证码" | 按钮默认文本 |
| sendText | String | "请稍候..." | 发送中的按钮文本 |
| countdownText | String | "s后获取" | 倒计时文本后缀 |
| seconds | Number | 60 | 倒计时秒数 |
| width | String | "182rpx" | 按钮宽度 |
| height | String | "56rpx" | 按钮高度 |
| padding | String | "0" | 按钮内边距 |
| margin | String | "0" | 按钮外边距 |
| radius | String | "6rpx" | 按钮圆角 |
| size | Number | 24 | 字体大小(rpx) |
| color | String | "#5677fc" | 字体颜色 |
| background | String | "transparent" | 背景颜色 |
| borderWidth | String | "1px" | 边框宽度 |
| borderColor | String | "#5677fc" | 边框颜色 |
| isOpacity | Boolean | true | 倒计时状态是否透明 |
| hover | Boolean | true | 是否有点击效果 |
| successVal | Number/String | 0 | 触发倒计时的值，值变化时开始倒计时 |
| resetVal | Number/String | 0 | 重置倒计时的值，值变化时重置倒计时 |
| start | Boolean | false | 是否自动开始倒计时 |
| params | Number/String | 0 | 传递给事件的参数 |
| disabledColor | String | "" | 禁用状态的背景颜色 |

### Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| send | 点击发送按钮时触发 | { params: 传入的params值 } |
| countdown | 倒计时变化时触发 | { seconds: 剩余秒数, params: 传入的params值 } |
| end | 倒计时结束时触发 | { params: 传入的params值 } |

### Methods

| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| success | 开始倒计时 | - |
| reset | 重置倒计时状态 | - |

## 使用示例

### 默认使用

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

### 默认为倒计时状态

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

### 设置圆角

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

### 设置颜色

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

### 设置大小

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

### 设置秒数

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

### 改变倒计时状态下颜色

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

### 设置文本

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

## 注意事项

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