更新记录

1.0.0（2026-04-15）

v1.0.0：初始版本，支持多种样式（矩形、圆形），可配置倒计时秒数，可自定义文案，可自由设置按钮样式，支持有边框和无边框的选择，支持有背景和无背景的选择，支持Loading效果，使用组合式API。

平台兼容性

uni-app(3.7.6)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	-	-	-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
√	×	√

验证码倒计时插件

简介

这是一个基于uni-app的验证码倒计时插件，符合easycom规范，支持多种样式和配置选项。该插件设计简洁、功能丰富，适用于各种需要验证码功能的场景，如登录、注册、密码找回等。

功能特性

✅ 支持多种样式：矩形、圆形
✅ 可配置倒计时秒数
✅ 可自定义文案：获取验证码、X秒后重试等
✅ 可自由设置按钮宽高
✅ 可自定义背景颜色、字体颜色、字体大小
✅ 支持有边框和无边框的选择
✅ 支持有背景和无背景的选择
✅ 支持Loading效果，用于请求接口过程中
✅ 自动内存管理，避免内存泄漏
✅ 使用组合式API，代码更加现代化
✅ 符合easycom规范，无需手动引入

安装

方法一：直接下载

将插件放入uni-app项目的components目录下，即可通过easycom自动引入。

方法二：npm安装（推荐）

npm install verification-code-countdown

使用示例

基础用法

<template>
  <verification-code-countdown
    ref="codeBtn"
    @click="handleClick"
  />
</template>

<script setup>
import { ref } from 'vue'

const codeBtn = ref(null)

const handleClick = () => {
  // 模拟验证通过后开始倒计时
  codeBtn.value.startCountdown()
}
</script>

圆形样式

<verification-code-countdown
  ref="circleBtn"
  @click="handleClick"
  type="circle"
  width="70rpx"
  height="70rpx"
  bgColor="#4cd964"
  textColor="#ffffff"
/>

带边框样式

<verification-code-countdown
  ref="borderBtn"
  @click="handleClick"
  :border="true"
  borderColor="#007aff"
  bgColor="transparent"
  textColor="#007aff"
/>

自定义文案

<verification-code-countdown
  ref="customBtn"
  @click="handleClick"
  initText="发送验证码"
  countdownText="{seconds}秒后可重新发送"
/>

带Loading效果

<verification-code-countdown
  ref="loadingBtn"
  @click="handleLoadingClick"
  initText="获取验证码"
/>

<script setup>
import { ref } from 'vue'

const loadingBtn = ref(null)

const handleLoadingClick = () => {
  // 显示loading效果
  loadingBtn.value.setLoading(true)

  // 模拟请求接口的过程
  setTimeout(() => {
    // 请求成功后开始倒计时
    loadingBtn.value.startCountdown()
    // 隐藏loading效果
    loadingBtn.value.setLoading(false)
  }, 2000) // 模拟2秒的请求时间
}
</script>

组合样式示例

<verification-code-countdown
  ref="combinedBtn"
  @click="handleClick"
  type="rectangle"
  :seconds="30"
  width="180rpx"
  height="60rpx"
  fontSize="26rpx"
  bgColor="#ff9500"
  textColor="#ffffff"
  :border="true"
  borderColor="#ff9500"
  initText="获取验证码"
  countdownText="{seconds}秒后重试"
  :customStyle="{
    borderRadius: '30rpx',
    fontWeight: 'bold'
  }"
/>

属性说明

属性名	类型	默认值	说明
seconds	Number	60	倒计时秒数
type	String	rectangle	按钮类型：rectangle（矩形）、circle（圆形）
disabled	Boolean	false	是否禁用
width	String	120rpx	按钮宽度
height	String	60rpx	按钮高度
fontSize	String	24rpx	字体大小
bgColor	String	#007aff	背景颜色
textColor	String	#ffffff	字体颜色
borderColor	String	#007aff	边框颜色
border	Boolean	false	是否显示边框
background	Boolean	true	是否显示背景
initText	String	获取验证码	初始文案
countdownText	String	{seconds}秒后重试	倒计时文案模板，{seconds}会被替换为当前秒数
customStyle	Object	{}	自定义样式对象，优先级高于默认样式

方法

方法名	说明
startCountdown()	开始倒计时
stopCountdown()	停止倒计时
setLoading(loading)	设置loading状态，参数为布尔值

事件

事件名	说明
click	按钮点击事件，仅在未倒计时且未禁用时触发

注意事项

插件会自动在组件销毁时清除倒计时定时器，避免内存泄漏
倒计时过程中按钮会自动禁用，倒计时结束后恢复可用状态
支持通过disabled属性手动禁用按钮
在使用customStyle属性时，自定义样式会覆盖默认样式
当使用type="circle"时，建议将宽高设置为相同值，以获得完美的圆形效果

常见问题与解决方案

Q: 为什么按钮点击后没有开始倒计时？

A: 请检查是否正确调用了startCountdown()方法。按钮点击事件只会触发click事件，需要在事件处理函数中手动调用startCountdown()方法开始倒计时。

Q: 为什么Loading效果没有显示？

A: 请确保在请求接口前调用了setLoading(true)方法，在请求完成后调用setLoading(false)方法。

Q: 为什么自定义样式没有生效？

A: 请确保customStyle属性是一个对象，并且属性名使用驼峰命名法（如fontSize而不是font-size）。

Q: 如何在倒计时结束后执行一些操作？

A: 可以在父组件中监听倒计时状态，或者在startCountdown()方法调用后使用setTimeout来执行倒计时结束后的操作。

浏览器兼容性

浏览器	兼容性
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅

贡献指南

Fork 本仓库
创建特性分支 (git checkout -b feature/amazing-feature)
提交更改 (git commit -m 'Add some amazing feature')
推送到分支 (git push origin feature/amazing-feature)
打开 Pull Request

更新日志

v1.0.0

初始版本
支持多种样式：矩形、圆形
可配置倒计时秒数
可自定义文案
可自由设置按钮样式
支持有边框和无边框的选择
支持有背景和无背景的选择
支持Loading效果
使用组合式API

许可证

MIT License

作者

本插件由uni-app爱好者开发维护，欢迎Star和Fork！