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

属性名类型默认值说明
textString“发送验证码”按钮默认文本
sendTextString“请稍候…”发送中的按钮文本
countdownTextString“s后获取”倒计时文本后缀
secondsNumber60倒计时秒数
widthString“182rpx”按钮宽度
heightString“56rpx”按钮高度
paddingString“0”按钮内边距
marginString“0”按钮外边距
radiusString“6rpx”按钮圆角
sizeNumber24字体大小(rpx)
colorString“#5677fc”字体颜色
backgroundString“transparent”背景颜色
borderWidthString“1px”边框宽度
borderColorString“#5677fc”边框颜色
isOpacityBooleantrue倒计时状态是否透明
hoverBooleantrue是否有点击效果
successValNumber/String0触发倒计时的值，值变化时开始倒计时
resetValNumber/String0重置倒计时的值，值变化时重置倒计时
startBooleanfalse是否自动开始倒计时
paramsNumber/String0传递给事件的参数
disabledColorString“”禁用状态的背景颜色

Events

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

Methods

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

使用示例

默认使用

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

默认为倒计时状态

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

设置圆角

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

设置颜色

<jia-countdown-verifycolor="#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-verifybackground="#02B653"borderWidth="0"color="#fff"@send="onSend"disabledColor="#999"
/>

设置文本

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

注意事项

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

组件封装中细节点总结

  • 微信小程序兼容:style=“[styleObj]” 需要 统一使用数组包裹样式对象
  • 慎用 upx 单位：仅在维护老项目或已有组件库时，才需继续使用 upx；新开发应尽量避免使用 upx，并可逐步将 upx 单位改为 rpx，如果确实需要动态计算 upx 值，可调用 uni.upx2px()。
  • 在 Vue3 中为所有自定义事件声明 emits，避免与原生事件冲突
  • 生命周期兼容处理 vue2 beforeDestroy vue3 unmounted 使用注释做环境区分 // #ifdef VUE2， // #endif

完整代码

建议通过插件市场下载小编持续维护

<template><!-- 验证码倒计时按钮 --><buttonclass="sms-btn":disabled="isDisabled":hover-class="hover ? 'button-hover' : 'none'"@click="handleClick":style="[buttonStyle]">{{ buttonText }}</button>
</template><script>
/*** 验证码倒计时按钮组件* @description 用于发送短信验证码的倒计时按钮，支持自定义样式和倒计时时间* @property {String} text - 按钮默认文本* @property {String} sendText - 发送中的按钮文本* @property {String} countdownText - 倒计时文本后缀* @property {Number} seconds - 倒计时秒数* @property {String} width - 按钮宽度* @property {String} height - 按钮高度* @property {String} padding - 按钮内边距* @property {String} margin - 按钮外边距* @property {String} radius - 按钮圆角* @property {Number} size - 字体大小* @property {String} color - 字体颜色* @property {String} background - 背景颜色* @property {String} borderWidth - 边框宽度* @property {String} borderColor - 边框颜色* @property {Boolean} isOpacity - 倒计时状态是否透明* @property {Boolean} hover - 是否有点击效果* @property {Number/String} successVal - 触发倒计时的值，值变化时开始倒计时* @property {Number/String} resetVal - 重置倒计时的值，值变化时重置倒计时* @property {Boolean} start - 是否自动开始倒计时* @property {Number/String} params - 传递给事件的参数* @event {Function} send - 点击发送按钮时触发* @event {Function} countdown - 倒计时变化时触发* @event {Function} end - 倒计时结束时触发*/
export default {name: "SmsCountdownButton",/*** Vue3 现在提供了一个emits选项，类似于现有props选项。此选项可用于定义组件可以向其父对象发出的事件强烈建议使用emits记录每个组件发出的所有事件。这一点特别重要，因为去除了.native修饰符。emits 现在在未使用声明的事件的所有侦听器都将包含在组件的中$attrs，默认情况下，该侦听器将绑定到组件的根节点。*/emits: ["countdown", "send", "end"], // 显式声明自定义事件props: {text: { type: String, default: "发送验证码" }, // 按钮默认文本sendText: { type: String, default: "请稍候..." }, // 发送中的按钮文本countdownText: { type: String, default: "s后获取" }, // 倒计时文本后缀seconds: { type: Number, default: 60 }, // 倒计时秒数width: { type: String, default: "182rpx" }, // 按钮宽度height: { type: String, default: "56rpx" }, // 按钮高度padding: { type: String, default: "0" }, // 按钮内边距margin: { type: String, default: "0" }, // 按钮外边距radius: { type: String, default: "6rpx" }, // 按钮圆角size: { type: Number, default: 24 }, // 字体大小color: { type: String, default: "#5677fc" }, // 字体颜色background: { type: String, default: "transparent" }, // 背景颜色borderWidth: { type: String, default: "1px" }, // 边框宽度borderColor: { type: String, default: "#5677fc" }, // 边框颜色isOpacity: { type: Boolean, default: true }, // 倒计时状态是否透明hover: { type: Boolean, default: true }, // 是否有点击效果successVal: { type: [Number, String], default: 0 }, // 触发倒计时的值resetVal: { type: [Number, String], default: 0 }, // 重置倒计时的值start: { type: Boolean, default: false }, // 是否自动开始倒计时params: { type: [Number, String], default: 0 }, // 传递给事件的参数disabledColor: { type: String, default: "" }, // 禁用状态的字体颜色},data() {return {state: "idle", // 按钮状态：idle(空闲)、pending(发送中)、countdown(倒计时)remaining: this.seconds, // 剩余秒数timer: null, // 定时器};},computed: {/*** 按钮是否禁用* @return {Boolean} 非空闲状态时禁用按钮*/isDisabled() {return this.state !== "idle";},/*** 按钮文本* @return {String} 根据状态返回不同的按钮文本*/buttonText() {// 空闲状态if (this.state === "idle") {return this.text;// 发送状态} else if (this.state === "pending") {return this.sendText;// 倒计时状态} else if (this.state === "countdown") {return `${this.remaining}${this.countdownText}`;}},/*** 按钮样式* @return {Object} 样式对象*/buttonStyle() {const style = {width: this.width,height: this.height,padding: this.padding,margin: this.margin,color: this.color,background: this.background,borderWidth: this.borderWidth,borderColor: this.borderColor,borderRadius: this.radius,fontSize: this.size + "rpx",borderStyle: "solid",textAlign: "center",};// 倒计时状态且需要透明时设置透明度if (this.state === "countdown" && this.isOpacity) {style.opacity = 0.5;}// 倒计时状态且需要禁用时设置背景颜色if (this.disabledColor && this.state === "countdown") {style.background = this.disabledColor;}return style;},},watch: {/*** 监听成功值变化，触发倒计时*/successVal(newVal, oldVal) {if (newVal !== oldVal) {this.success();}},/*** 监听重置值变化，重置倒计时*/resetVal(newVal, oldVal) {if (newVal !== oldVal) {this.reset();}},},mounted() {// 如果设置了自动开始，则立即开始倒计时if (this.start) {this.success();}},// 在 Vue3 中组件卸载的生命周期被重新命名  destroyed 修改为 unmounted// #ifdef VUE2beforeDestroy() {// 组件销毁前清除定时器if (this.timer) {clearInterval(this.timer);this.timer = null;}},// #endif// #ifdef VUE3unmounted() {// 组件销毁前清除定时器if (this.timer) {clearInterval(this.timer);this.timer = null;}},// #endifmethods: {/*** 开始倒计时*/startCountdown() {// 清除可能存在的定时器if (this.timer) {clearInterval(this.timer);}// 设置状态为倒计时this.state = "countdown";this.remaining = this.seconds;// 触发倒计时事件 {因为倒计时事件是每秒触发一次，最开始要触发一次}this.$emit("countdown", { seconds: this.remaining, params: this.params });// 设置定时器this.timer = setInterval(() => {// 倒计时this.remaining--;if (this.remaining > 0) {// 每秒触发倒计时事件this.$emit("countdown", {seconds: this.remaining,params: this.params,});} else {// 倒计时结束，清除定时器clearInterval(this.timer);this.timer = null;// 设置状态为空闲this.state = "idle";// 触发结束事件this.$emit("end", { params: this.params });}}, 1000);},/*** 成功发送验证码，开始倒计时*/success() {// 如果按钮状态不为倒计时，则开始倒计时 [空闲状态｜发送中状态都可以进入]// 自动开始时是空闲，手动点击时是发送中if (this.state !== "countdown") {this.startCountdown();}},/*** 重置按钮状态*/reset() {// 清除定时器if (this.timer) {clearInterval(this.timer);this.timer = null;}// 重置状态this.state = "idle";// 重置剩余秒数this.remaining = this.seconds;},/*** 按钮点击处理*/handleClick() {// 如果按钮状态为空闲，则设置状态为发送中，并触发发送事件if (this.state === "idle") {// 设置状态为发送中this.state = "pending";// 触发发送事件this.$emit("send", { params: this.params });}},},
};
</script><style scoped>
/* 按钮基本样式 */
.sms-btn {display: inline-block; /* 内联块级元素 */text-align: center; /* 文本居中 */cursor: pointer; /* 鼠标样式 */
}
/* 禁用状态样式 */
.sms-btn:disabled {cursor: not-allowed; /* 禁用状态的鼠标样式 */
}
.button-hover {transform: scale(0.98); /* 按钮悬停时的缩放 */box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 按钮悬停时的阴影 */
}</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/905473.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/905473.shtml
英文地址，请注明出处：http://en.pswp.cn/news/905473.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

知识图谱重构电商搜索：下一代AI搜索引擎的底层逻辑

知识图谱重构电商搜索：下一代AI搜索引擎的底层逻辑

1. 搜索引擎的进化论 从雅虎目录式搜索到Google的PageRank算法&#xff0c;搜索引擎经历了三次技术跃迁。而AI搜索引擎正在掀起第四次革命&#xff1a;在电商场景中&#xff0c;传统的「关键词匹配」已无法满足个性化购物需求&#xff0c;MOE搜索等新一代架构开始融合知识图谱…
阅读更多...
深度学习 自然语言处理(RNN) day_02

深度学习 自然语言处理(RNN) day_02

1. 感知机与神经网络 1.1 感知机 生物神经元&#xff1a; 1.1.1 感知机的概念 感知机&#xff08;Perceptron&#xff09;&#xff0c;又称神经元&#xff08;Neuron&#xff0c;对生物神经元进行了模仿&#xff09;是神 经网络&#xff08;深度学习&#xff09;的起源算法&am…
阅读更多...
PYTHON训练营DAY25

PYTHON训练营DAY25

BUG与报错 一、try else try:# 可能会引发异常的代码 except ExceptionType: # 最好指定具体的异常类型&#xff0c;例如 ZeroDivisionError, FileNotFoundError# 当 try 块中发生 ExceptionType 类型的异常时执行的代码 except: # 不推荐&#xff1a;捕获所有类型的异常&…
阅读更多...
LU分解求解线性方程组

LU分解求解线性方程组

L U LU LU分解 前言 L U LU LU分解 由以下定理得以保证&#xff1a; 设 A \boldsymbol{A} A为 n n n阶方阵&#xff0c;若其各界阶顺序主子式都不为 0 0 0&#xff0c;那么它可以 被唯一的上下三角矩阵积分解。 步骤 确定各矩阵形式 A L U \mathbf{A}\mathbf{LU} ALU ( a 1…
阅读更多...
Linux——数据库备份与恢复

Linux——数据库备份与恢复

一&#xff0c;Mysql数据库备份概述 1&#xff0c;数据库备份的重要性 数据灾难恢复&#xff1a;数据库可能会因为各种原因出现故障&#xff0c;如硬件故障、软件错误、误操作、病毒攻击、自然灾害等。这些情况都可能导致数据丢失或损坏。如果有定期的备份&#xff0c;就可以…
阅读更多...
SVM在医疗设备故障维修服务决策中的应用：策略、技术与实践

SVM在医疗设备故障维修服务决策中的应用：策略、技术与实践

SVM在医疗设备故障维修服务决策中的应用&#xff1a;策略、技术与实践 医疗设备的高可靠性、安全性及严格合规性要求&#xff0c;使其故障维修决策具有显著的特殊性。支持向量机&#xff08;SVM&#xff09;凭借小样本学习、非线性建模及高精度分类能力&#xff0c;可有效解决…
阅读更多...
WEB安全--Java安全--CC1利用链

WEB安全--Java安全--CC1利用链

一、梳理基本逻辑 WEB后端JVM通过readObject()的反序列化方式接收用户输入的数据 用户编写恶意代码并将其序列化为原始数据流 WEB后端JVM接收到序列化后恶意的原始数据并进行反序列化 当调用&#xff1a; ObjectInputStream.readObject() JVM 内部逻辑&#xff1a; → 反…
阅读更多...
FlashInfer - 介绍 LLM服务加速库 地基的一块石头

FlashInfer - 介绍 LLM服务加速库 地基的一块石头

FlashInfer - 介绍 LLM服务加速库 地基的一块石头 flyfish 大型语言模型服务中的注意力机制 大型语言模型服务&#xff08;LLM Serving&#xff09;迅速成为重要的工作负载。Transformer中的算子效率——尤其是矩阵乘法&#xff08;GEMM&#xff09;、自注意力&#xff08;S…
阅读更多...
反向操作：如何用AI检测工具优化自己的论文“人味”？

反向操作：如何用AI检测工具优化自己的论文“人味”？

大家好&#xff0c;这里是论文写手的一线自救指南&#x1f624; 在AIGC横行的今天&#xff0c;谁还没偷偷用过AI写几段论文内容&#xff1f;但问题来了&#xff1a;学校越来越会“识AI”了&#xff01; 有的学校甚至不看重复率&#xff0c;只盯AIGC率报告&#xff0c;一句“AI…
阅读更多...
关于单片机的基础知识（一）

关于单片机的基础知识（一）

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于单片机基础知识的相关内容&#xf…
阅读更多...
AWS技术助力企业满足GDPR合规要求

AWS技术助力企业满足GDPR合规要求

GDPR(通用数据保护条例)作为欧盟严格的数据保护法规,给许多企业带来了合规挑战。本文将探讨如何利用AWS(亚马逊云服务)的相关技术来满足GDPR的核心要求,帮助企业实现数据保护合规。 一、GDPR核心要求概览 GDPR的主要目标是保护欧盟公民的个人数据和隐私权。其核心要求包括: 数…
阅读更多...
FFplay 音视频同步机制解析：以音频为基准的时间校准与动态帧调整策略

FFplay 音视频同步机制解析：以音频为基准的时间校准与动态帧调整策略

1.⾳视频同步基础 1.2 简介 看视频时&#xff0c;要是声音和画面不同步&#xff0c;体验会大打折扣。之所以会出现这种情况&#xff0c;和音视频数据的处理过程密切相关。音频和视频的输出不在同一个线程&#xff0c;就像两个工人在不同车间工作&#xff0c;而且不一定会同时…
阅读更多...
车载网关--- 职责边界划分与功能解耦设计

车载网关--- 职责边界划分与功能解耦设计

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。 生活中有两种人，一种人格外在意别人的眼光;另一种人无论…
阅读更多...
最优化方法Python计算：有约束优化应用——近似线性可分问题支持向量机

最优化方法Python计算：有约束优化应用——近似线性可分问题支持向量机

二分问题的数据集 { ( x i , y i ) } \{(\boldsymbol{x}_i,y_i)\} {(xi​,yi​)}&#xff0c; i 1 , 2 , ⋯ , m i1,2,\cdots,m i1,2,⋯,m中&#xff0c;特征数据 { x i } \{\boldsymbol{x}_i\} {xi​}未必能被一块超平面按其标签值 y i ∈ { − 1 , 1 } y_i\in\{-1,1\} yi​∈…
阅读更多...
aardio - 将文本生成CSS格式显示

aardio - 将文本生成CSS格式显示

import win.ui; /*DSG{{*/ var winform win.form(text"aardio form";right759;bottom469) winform.add( button{cls"button";text"Button";left340;top130;right430;bottom180;z3}; edit{cls"edit";text"我是一串文本";lef…
阅读更多...
数字IC后端设计实现 | 如何自动删除Innovus 中冗余的hold buffer？

数字IC后端设计实现 | 如何自动删除Innovus 中冗余的hold buffer？

我们都知道在postCTS阶段做optDesign时序优化时需要进行hold violation的fixing。所以这个过程势必要通过插hold buffer来解决hold violation。这类hold buffer的名字带有"PHC"的关键词。 select_obj [dbGet top.insts.name PHC] llength [dbGet top.insts.name PH…
阅读更多...
c# 倒序方法

c# 倒序方法

在C#中&#xff0c;有几种方法可以对List进行倒序排列&#xff1a; 1. 使用List的Reverse()方法&#xff08;原地反转&#xff09; List<int> numbers new List<int> { 1, 2, 3, 4, 5 };numbers.Reverse(); // 直接修改原列表// 结果&#xff1a;5, 4, 3, 2, 1 …
阅读更多...
【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权

【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权

【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权 文章目录 【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权[toc]一&#xff1a;Kerberos 委派攻击原理之 S4U2利用1.1原理1.2两种扩展协议**S4U2Self (Service for User to Self)****S4U2Proxy (Service for User to Proxy)*…
阅读更多...
AD 间距规则与布线规则

AD 间距规则与布线规则

1. 打开在线规则检查 2. 间距规则 一般来说最小间距设为6mil 注意&#xff1a; AD22 也提供类似低版本那样的、多个间距规则叠加的方法&#xff0c;通过选择第一个适配对象和第二个适配对象来筛选对象和范围。 ① Where The First Object Matches &#xff1a;选择规则第一个…
阅读更多...
Android Studio 安装与配置完全指南

Android Studio 安装与配置完全指南

文章目录 第一部分&#xff1a;Android Studio 简介与安装准备1.1 Android Studio 概述1.2 系统要求Windows 系统&#xff1a;macOS 系统&#xff1a;Linux 系统&#xff1a; 1.3 下载 Android Studio 第二部分&#xff1a;安装 Android Studio2.1 Windows 系统安装步骤2.2 mac…
阅读更多...
最新文章

Copyright @ 2022~2023